Javascript 滚动时的菜单活动类-带有部分边距的问题_Javascript_Jquery_Html_Css

Javascript 滚动时的菜单活动类-带有部分边距的问题

javascript jquery html css

Javascript 滚动时的菜单活动类-带有部分边距的问题,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我想做什么： <div id="headerWrapperFixed"> <div id="headerFixed"> <div id="fixedMenu"> <ul> <li><a href="#home">Home</a> </li> <li&g

我想做什么：

<div id="headerWrapperFixed">
    <div id="headerFixed">
        <div id="fixedMenu">
            <ul>
                <li><a href="#home">Home</a>

                </li>
                <li><a href="#about-us">About Us</a>

                </li>
                <li><a href="#pricing">Pricing</a>

                </li>
                </li>
            </ul>
        </div>
    </div>
</div>
<div id="home">
     <h1>HOME</h1>

</div>
<div id="about-us">
     <h1>ABOUT US</h1>

</div>
<div id="pricing">
     <h1>PRICING</h1>

</div>

#headerWrapperFixed {
    top:0;
    position:fixed;
    height:30px;
    width:100%;
    background-color:RGB(38, 38, 38);
}
#headerFixed {
    width:1100px;
    height:30px;
    background-color:RGB(200, 200, 200);
}
#fixedMenu {
    position:relative;
    width:700px;
    height:30px;
}
#fixedMenu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width:650px;
    height:30px;
}
#fixedMenu li {
    display: table-cell;
    width:120px;
    height:30px;
    text-align:center;
    vertical-align:middle;
}
li.active a, #fixedMenu li>a:hover, a.active {
    color:#FF0000 !important;
}
#home {
    height:800px;
    background-color:rgb(100, 100, 100);
    margin-top:100px;
}
#about-us {
    height:800px;
    background-color:rgb(200, 200, 200);
    margin-top:100px;
}
#pricing {
    margin-top:100px;
    height:800px;
}
h1 {
    margin:0;
    padding-top:50px;
}

$(window).scroll(function () {


    var scrollPos = $(document).scrollTop() + 40;
    $('#fixedMenu a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('#fixedMenu ul li').removeClass("active");
            currLink.addClass("active");
        } else {
            currLink.removeClass("active");
        }
    });

});

当用户上下滚动我的网站（单页，多个部分）时，菜单将突出显示用户当前所在页面的哪个部分

我所做的：

<div id="headerWrapperFixed">
    <div id="headerFixed">
        <div id="fixedMenu">
            <ul>
                <li><a href="#home">Home</a>

                </li>
                <li><a href="#about-us">About Us</a>

                </li>
                <li><a href="#pricing">Pricing</a>

                </li>
                </li>
            </ul>
        </div>
    </div>
</div>
<div id="home">
     <h1>HOME</h1>

</div>
<div id="about-us">
     <h1>ABOUT US</h1>

</div>
<div id="pricing">
     <h1>PRICING</h1>

</div>

#headerWrapperFixed {
    top:0;
    position:fixed;
    height:30px;
    width:100%;
    background-color:RGB(38, 38, 38);
}
#headerFixed {
    width:1100px;
    height:30px;
    background-color:RGB(200, 200, 200);
}
#fixedMenu {
    position:relative;
    width:700px;
    height:30px;
}
#fixedMenu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width:650px;
    height:30px;
}
#fixedMenu li {
    display: table-cell;
    width:120px;
    height:30px;
    text-align:center;
    vertical-align:middle;
}
li.active a, #fixedMenu li>a:hover, a.active {
    color:#FF0000 !important;
}
#home {
    height:800px;
    background-color:rgb(100, 100, 100);
    margin-top:100px;
}
#about-us {
    height:800px;
    background-color:rgb(200, 200, 200);
    margin-top:100px;
}
#pricing {
    margin-top:100px;
    height:800px;
}
h1 {
    margin:0;
    padding-top:50px;
}

$(window).scroll(function () {


    var scrollPos = $(document).scrollTop() + 40;
    $('#fixedMenu a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('#fixedMenu ul li').removeClass("active");
            currLink.addClass("active");
        } else {
            currLink.removeClass("active");
        }
    });

});

我有一个菜单工作，这样当链接部分当前滚动到时，它会将类更改为“活动”

问题：

<div id="headerWrapperFixed">
    <div id="headerFixed">
        <div id="fixedMenu">
            <ul>
                <li><a href="#home">Home</a>

                </li>
                <li><a href="#about-us">About Us</a>

                </li>
                <li><a href="#pricing">Pricing</a>

                </li>
                </li>
            </ul>
        </div>
    </div>
</div>
<div id="home">
     <h1>HOME</h1>

</div>
<div id="about-us">
     <h1>ABOUT US</h1>

</div>
<div id="pricing">
     <h1>PRICING</h1>

</div>

#headerWrapperFixed {
    top:0;
    position:fixed;
    height:30px;
    width:100%;
    background-color:RGB(38, 38, 38);
}
#headerFixed {
    width:1100px;
    height:30px;
    background-color:RGB(200, 200, 200);
}
#fixedMenu {
    position:relative;
    width:700px;
    height:30px;
}
#fixedMenu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width:650px;
    height:30px;
}
#fixedMenu li {
    display: table-cell;
    width:120px;
    height:30px;
    text-align:center;
    vertical-align:middle;
}
li.active a, #fixedMenu li>a:hover, a.active {
    color:#FF0000 !important;
}
#home {
    height:800px;
    background-color:rgb(100, 100, 100);
    margin-top:100px;
}
#about-us {
    height:800px;
    background-color:rgb(200, 200, 200);
    margin-top:100px;
}
#pricing {
    margin-top:100px;
    height:800px;
}
h1 {
    margin:0;
    padding-top:50px;
}

$(window).scroll(function () {


    var scrollPos = $(document).scrollTop() + 40;
    $('#fixedMenu a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('#fixedMenu ul li').removeClass("active");
            currLink.addClass("active");
        } else {
            currLink.removeClass("active");
        }
    });

});

每个部分的上边缘大约为50-100px。当前的javascript代码不能处理这个问题，如果用户处于两个部分之间，则会从所有菜单项中删除该类

JS小提琴：

HTML:

<div id="headerWrapperFixed">
    <div id="headerFixed">
        <div id="fixedMenu">
            <ul>
                <li><a href="#home">Home</a>

                </li>
                <li><a href="#about-us">About Us</a>

                </li>
                <li><a href="#pricing">Pricing</a>

                </li>
                </li>
            </ul>
        </div>
    </div>
</div>
<div id="home">
     <h1>HOME</h1>

</div>
<div id="about-us">
     <h1>ABOUT US</h1>

</div>
<div id="pricing">
     <h1>PRICING</h1>

</div>

#headerWrapperFixed {
    top:0;
    position:fixed;
    height:30px;
    width:100%;
    background-color:RGB(38, 38, 38);
}
#headerFixed {
    width:1100px;
    height:30px;
    background-color:RGB(200, 200, 200);
}
#fixedMenu {
    position:relative;
    width:700px;
    height:30px;
}
#fixedMenu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width:650px;
    height:30px;
}
#fixedMenu li {
    display: table-cell;
    width:120px;
    height:30px;
    text-align:center;
    vertical-align:middle;
}
li.active a, #fixedMenu li>a:hover, a.active {
    color:#FF0000 !important;
}
#home {
    height:800px;
    background-color:rgb(100, 100, 100);
    margin-top:100px;
}
#about-us {
    height:800px;
    background-color:rgb(200, 200, 200);
    margin-top:100px;
}
#pricing {
    margin-top:100px;
    height:800px;
}
h1 {
    margin:0;
    padding-top:50px;
}

$(window).scroll(function () {


    var scrollPos = $(document).scrollTop() + 40;
    $('#fixedMenu a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('#fixedMenu ul li').removeClass("active");
            currLink.addClass("active");
        } else {
            currLink.removeClass("active");
        }
    });

});

Javascript:

<div id="headerWrapperFixed">
    <div id="headerFixed">
        <div id="fixedMenu">
            <ul>
                <li><a href="#home">Home</a>

                </li>
                <li><a href="#about-us">About Us</a>

                </li>
                <li><a href="#pricing">Pricing</a>

                </li>
                </li>
            </ul>
        </div>
    </div>
</div>
<div id="home">
     <h1>HOME</h1>

</div>
<div id="about-us">
     <h1>ABOUT US</h1>

</div>
<div id="pricing">
     <h1>PRICING</h1>

</div>

#headerWrapperFixed {
    top:0;
    position:fixed;
    height:30px;
    width:100%;
    background-color:RGB(38, 38, 38);
}
#headerFixed {
    width:1100px;
    height:30px;
    background-color:RGB(200, 200, 200);
}
#fixedMenu {
    position:relative;
    width:700px;
    height:30px;
}
#fixedMenu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width:650px;
    height:30px;
}
#fixedMenu li {
    display: table-cell;
    width:120px;
    height:30px;
    text-align:center;
    vertical-align:middle;
}
li.active a, #fixedMenu li>a:hover, a.active {
    color:#FF0000 !important;
}
#home {
    height:800px;
    background-color:rgb(100, 100, 100);
    margin-top:100px;
}
#about-us {
    height:800px;
    background-color:rgb(200, 200, 200);
    margin-top:100px;
}
#pricing {
    margin-top:100px;
    height:800px;
}
h1 {
    margin:0;
    padding-top:50px;
}

$(window).scroll(function () {


    var scrollPos = $(document).scrollTop() + 40;
    $('#fixedMenu a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('#fixedMenu ul li').removeClass("active");
            currLink.addClass("active");
        } else {
            currLink.removeClass("active");
        }
    });

});

$（窗口）。滚动（函数（）{
var scrollPos=$（文档）.scrollTop（）+40；
$（'#fixedMenu a'）。每个（函数（）{
var currLink=$（此）；
var refElement=$（currLink.attr（“href”）；
if（refElement.position（）.top scrollPos）{
$（'fixedmenus ul li'）.removeClass（“active”）；
currLink.addClass（“活动”）；
}否则{
currLink.removeClass（“活动”）；
}
});
});

如果您只想在滚动到页边空白处时将活动类保留在当前部分，只需将其添加到等式的右侧即可

 if (refElement.position().top <= scrollPos + 120 && refElement.position().top + refElement.height() > scrollPos + 0) {

if（refElement.position（）.top scrollPos+0）{

或者如果你想去下一个，从右边减去它

 if (refElement.position().top <= scrollPos -120&& refElement.position().top + refElement.height() > scrollPos) {

if（refElement.position（）.top scrollPos）{

谢谢你的回答，虽然这不是我的意思。问题是，当你在两个部分之间滚动时，所有菜单项都会松开“活动”键类。取而代之的是，应该没有间隔，并且菜单项应该始终处于活动状态。这正是我在这里演示的内容。您说的是50或100像素左右。我使用了50，但替换了您的值。此外，您可以尝试不将引用元素分配给href，而是分配给li容器。嗯-我尝试了代码，但仍然有一个间隔没有一个菜单项处于活动状态-慢慢向下滚动。呃，我刚做了120和0，它就工作了。忘记了div标签内置了一些额外的填充，它不完全是100像素。