javascript - Active class on sticky nav -


my sticky nav:

<nav id="page-nav" class="page-nav">     <ul>             <li><a href="#top" class="linky active">overview</a></li>         <li><a class="linky" href="#sub-our-drainage-solutions">our drainage solutions</a></li>         <li><a class="linky" href="#sub-cctv-drain-survey">cctv drain survey</a></li>         <li><a class="linky" href="#sub-wet-waste-disposal">wet waste disposal</a></li>         <li><a class="linky" href="#sub-blocked-drains">blocked drains</a></li>         <li><a class="linky" href="#sub-cess-pit-emptying">cess pit emptying</a></li>     </ul> </nav>  <div id="sub-our-drainage-solutions">  </div>  <div id="sub-cctv-drain-survey">  </div>

etc...

$(function() {     //sticky scroll nav     //page nav     var s = $("#page-nav"),         //sectorcontent = $("#sector-content"),         pos = s.position(),          linkclicked = false,         w = $(window).width();        if(w > 800) {          $(window).scroll(function() {             var windowpos = $(window).scrolltop();             if (windowpos >= pos.top) {                 s.addclass("stick");             } else {                 s.removeclass("stick");              }         });          $(window).scroll(function() {             var y = $(this).scrolltop();             $('.linky').each(function(event) {                 id = $(this).attr('href');                 if (y >= $(id).offset().top -30) {                     if (!linkclicked) {                          $('.linky').not(this).removeclass('active');                         $(this).addclass('active');                     }                 }             });          });          $("#page-nav li a").click(function(e) {              e.preventdefault();             $("#page-nav li a").removeclass('active');             $(this).addclass('active');             linkclicked = true;              gotobyscroll($(this).attr("href").replace("#", ""));                    });          function gotobyscroll(id){             $('html,body').animate({                 scrolltop: $("#"+id).offset().top -30},                  'slow', function() {                      linkclicked = false;                 });         }      } });

the navigation sticks top of window on scroll, need change active class on anchor when passes related div id.

i'm getting following error on scroll:

uncaught typeerror: cannot read property 'top' of null

due part of code:

$(window).scroll(function() {             var y = $(this).scrolltop();             $('.linky').each(function(event) {                 id = $(this).attr('href');                 if (y >= $(id).offset().top -30) {                     if (!linkclicked) {                          $('.linky').not(this).removeclass('active');                         $(this).addclass('active');                     }                 }             });          });

what can resolve issue?

not sure happening code, snippet works me change active class on scroll , smooth scrolling go with.

$(document).ready(function () {      $(document).on("scroll", onscroll);            //smoothscroll      $('#nav-minor a[href^="#"]').on('click', function (e) {          e.preventdefault();          $(document).off("scroll");                    $('#nav-minor a').each(function () {              $(this).removeclass('active');          })          $(this).addclass('active');                  var target = this.hash,              menu = target;          var $target = $(target);          $('html, body').stop().animate({              'scrolltop': $target.offset().top+2          }, 500, 'swing', function () {              window.location.hash = target;              $(document).on("scroll", onscroll);          });      });  });    function onscroll(event){      var scrollpo = $(document).scrolltop();      $('#nav-minor a').each(function () {              var currlink = $(this);          var refelement = $(currlink.attr("href"));          if (refelement.position().top <= scrollpo && refelement.position().top + refelement.height() > scrollpo) {              $('#nav-minor a').removeclass("active");              currlink.addclass("active");          }          else{              currlink.removeclass("active");          }        });  }

then need basic css styling of class="active"


Comments

Post a Comment

Popular posts from this blog

apache - Remove .php and add trailing slash in url using htaccess not loading css -

i have add following code htaccess file removing .php extension , add trailing slash urls. worked fine reduced page loading speed , css code not loading @ all. pages ugly. please help rewriteengine on rewritebase / ## hide .php extension snippet # externally redirect /dir/foo.php /dir/foo rewritecond %{the_request} ^[a-z]{3,}\s([^.]+)\.php [nc] rewriterule ^ %1/ [r,l] # add trailing slash rewritecond %{request_filename} !-f rewritecond %{request_uri} !/$ rewriterule . %{request_uri}/ [l,r=301] # internally forward /dir/foo /dir/foo.php rewritecond %{request_filename} !-d rewritecond %{request_filename}.php -f rewriterule ^(.*?)/?$ $1.php [l] we can rewrite urls using .htaccess files. before writing in .htaccess files need verify kind of server using. can check server adding a <?php phpinfo(); ?> in php page. ensure mod_rewrite module enabled in apache server. can identified checking phpinfo included page. common methods used url rewriting follows ...
Read more

javascript - jQuery show full size image on click -

pretty self explanatory not workking . i want display full image when user click on image... yes know there tons of plugins but i want keep simple. any idea ? css : .full { display: none; width: 500px; height: 500px; margin-left: 100px; margin-top: -300px; position: fixed; background-color: #f00; z-index: 6; } .thumbnail { width: 50px; height: 50px; } html: <img class="thumbnail" src="http://4.bp.blogspot.com/-uhbdp2esxng/txneptvi92i/aaaaaaaaaky/upfqis7zto0/s1600/rihanna-wallpaper.jpg"> jquery: $(document).ready(function() { $('.thumbnail').on('click', function() { var img = $('<img />',{src:this.src,'class':'full'}); $('.full').html(img).show(); console.log('done!'); }); }); try looking how jquery works. $(document).ready(function() { $('.thumbnail').on('click', function(...
Read more