Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Try this I have made some changes in your code</p> <pre><code>$(document).ready(function(){ $("#top1").parent().addClass('active'); var main = main = $('#main ul'); $('.scroll').click(function(event) { event.preventDefault(); var full_url = this.href, parts = full_url.split('#'), trgt = parts[1], target_offset = $('#'+trgt).offset(), target_top = target_offset.top; $('html, body').animate({scrollTop:target_top}, 500); /* Remove active class on any li when an anchor is clicked */ main.children().removeClass(); /* Add active class to clicked anchor's parent li */ $(this).parent().addClass('active'); }); $(window).scroll(function(event) { if($("#top").offset().top &lt; $(window).scrollTop() + $(window).outerHeight()) { $("#top1").parent().addClass('active'); $("#middle1").parent().removeClass('active'); $("#bottom1").parent().removeClass('active'); } if($("#middle").offset().top &lt; $(window).scrollTop() + $(window).outerHeight()){ $("#middle1").parent().addClass('active'); $("#top1").parent().removeClass('active'); $("#bottom1").parent().removeClass('active'); } if($("#bottom").offset().top &lt; $(window).scrollTop() + $(window).outerHeight()){ $("#bottom1").parent().addClass('active'); $("#top1").parent().removeClass('active'); $("#middle1").parent().removeClass('active'); } }); }); </code></pre> <p>and in your Html made some changes to the following tags by adding an id attribute</p> <pre><code> &lt;li&gt;&lt;a href="#top" class="scroll" id="top1"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#middle" class="scroll" id="middle1"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#bottom" class="scroll" id="bottom1"&gt;&lt;/a&gt;&lt;/li&gt; </code></pre> <p>Here is the working jsfiddle <strong><a href="http://jsfiddle.net/YxRqp/284/" rel="nofollow">Demo</a></strong></p> <p>Hope this helps thank you.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload