最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Using jQuery to find current visible element and update navigation - Stack Overflow

programmeradmin4浏览0评论

First time user here. I am usually capable of finding answers for questions but I am having a difficult time figuring this one out.

The Goal:

I have a single page layout with a sidebar navigation that when clicked will scroll down to an element on the page. However, if the user just scrolls down the page to a specific element #id I want the corresponding link in the navigation to bee .active. The navigation link and the corresponding element share the same value via element#id and a[name].

Similar to: NikeBetterWorld

HTML Example below:

<nav>
    <a name="value">Link</a>
</nav>

<section id="value">
    content goes here
</section>

Obviously, there's more sections, links, elements, etc. But this is the gist of it. So when the user scrolls down to section#value the a[value] will have gained the class active.

I found an answer on here earlier that has helped somewhat but I am still having some issues. See this link for more information.

Current Javascript/jQuery:

$(document).scroll(function() {
    var cutoff = $(window).scrollTop();
    var cutoffRange = cutoff + 200;

    // Find current section and highlight nav menu
    var curSec = $.find('.current');
    var curID = $(curSec).attr('id');
    var curNav = $.find('a[name='+curID+']');
    $(curNav).addClass('active');

    $('.section').each(function(){
        if ($(this).offset().top > cutoff && $(this).offset().top < cutoffRange) {
            $('.section').removeClass('current')
            $(this).addClass('current');
            return false; // stops the iteration after the first one on screen
        }
    });
});

The Problem:

While the above code works to an extent I am running into one big issue. I am having trouble getting an entire element to stay .current. If the top of the element goes out of the window it will lose the class. I fixed that by adding a range for new elements, but now when the user scrolls upwards the previous element will not gain the class .current until the top of the element reaches the top of the window. I would prefer it if a dominant portion of the window, when visible, gained the .current class.

Any help, ideas or suggestions would be greatly appreciated.

Thanks in advance!

First time user here. I am usually capable of finding answers for questions but I am having a difficult time figuring this one out.

The Goal:

I have a single page layout with a sidebar navigation that when clicked will scroll down to an element on the page. However, if the user just scrolls down the page to a specific element #id I want the corresponding link in the navigation to bee .active. The navigation link and the corresponding element share the same value via element#id and a[name].

Similar to: NikeBetterWorld.

HTML Example below:

<nav>
    <a name="value">Link</a>
</nav>

<section id="value">
    content goes here
</section>

Obviously, there's more sections, links, elements, etc. But this is the gist of it. So when the user scrolls down to section#value the a[value] will have gained the class active.

I found an answer on here earlier that has helped somewhat but I am still having some issues. See this link for more information.

Current Javascript/jQuery:

$(document).scroll(function() {
    var cutoff = $(window).scrollTop();
    var cutoffRange = cutoff + 200;

    // Find current section and highlight nav menu
    var curSec = $.find('.current');
    var curID = $(curSec).attr('id');
    var curNav = $.find('a[name='+curID+']');
    $(curNav).addClass('active');

    $('.section').each(function(){
        if ($(this).offset().top > cutoff && $(this).offset().top < cutoffRange) {
            $('.section').removeClass('current')
            $(this).addClass('current');
            return false; // stops the iteration after the first one on screen
        }
    });
});

The Problem:

While the above code works to an extent I am running into one big issue. I am having trouble getting an entire element to stay .current. If the top of the element goes out of the window it will lose the class. I fixed that by adding a range for new elements, but now when the user scrolls upwards the previous element will not gain the class .current until the top of the element reaches the top of the window. I would prefer it if a dominant portion of the window, when visible, gained the .current class.

Any help, ideas or suggestions would be greatly appreciated.

Thanks in advance!

Share Improve this question edited May 23, 2017 at 10:28 CommunityBot 11 silver badge asked Jul 27, 2011 at 16:58 rebzrebz 2,1133 gold badges16 silver badges16 bronze badges 1
  • That is one of the coolest websites I've ever seen. – McKayla Commented Jul 27, 2011 at 17:33
Add a ment  | 

3 Answers 3

Reset to default 9

It sounds like you want to check the bottom edge of the section and not the top. Try this and remove the range all together:

if($(this).offset().top + $(this).height() > cutoff){

EDIT: Created a fiddle. I think this is what you're describing.

http://jsfiddle/pdzTW/

yeeeahhh! got the solution!

I just change from:

if ($(window).scrollTop() >= $(section).offset().top) {

to

if ($(window).scrollTop() + 80 >= $(section).offset().top) {

I always use jQuerys "filter" function to return the current section.

$currSection = $('section').filter(function() {
    var $this = $(this);
    var offset = $this.offset().top;
    var view = winHeight / 2;

    return scrollTop >= offset - view && offset + ($this.outerHeight() - view) >= scrollTop;
});

Wrap it in a scroll listener like:

$(window).on('scroll', function() {
    // here we go ...
});

Thats it.

发布评论

评论列表(0)

  1. 暂无评论