Jquery 到达div时更改ul样式（滚动）

我想在滚动时更改ul样式，并使用jQuery到达div，向下解释

CSS:

HTML代码：

<div id="menu">
    <div class="menutext">Change the style of me to .mebutext2 on arriving to DIV1</div>
    <div class="menutext">Change the style of me to .mebutext2 on arriving to DIV2</div>
    <div class="menutext">Change the style of me to .mebutext2 on arriving to DIV3</div>
</div>

<br><br><br>

<div class="alldivs"><div id="DIV1">DIV1</div></div>
<br><br><br><br>
<div class="alldivs"><div id="DIV2">DIV2</div></div>
<br><br><br><br>
<div class="alldivs"><div id="DIV3">DIV3</div></div>
<br><br><br><br>

到达DIV1时，将me的样式更改为.mebutext2
到达DIV2时，将me的样式更改为.mebutext2
到达DIV3时，将me的样式更改为.mebutext2




第一组





第二组





第三组

我想在滚动并到达div顶部时，将类为“menutext”的div更改为类为“menutext2”（第一个ul的类在到达id为DIV1的div时从menutext1更改为menutext2，第二个ul的类在到达id为DIV2的div时从menutext1更改为menutext2，第一个ul的类按原样返回menutext1，依此类推。

您可以使用框架编写类似以下内容的javascript：

var Event = YAHOO.util.Event;

Event.on(window, 'scroll', function() {

    if (document.getElementById("DIV1").scrollTop == 0) {
        document.getElementById("DIV1").className = "menutext2";
    }
}

---

这应该满足您的要求，只使用jQuery：

$(document).scroll(function(e) {
    var detectrange = 50; //how close to the top of the screen does it need to get
    var scrolltop = $(window).scrollTop() + detectrange;
    $('.alldivs').each(function(i, el){
        if (scrolltop > $(el).offset().top) {
            $('.'+el.id).removeClass('menutext').addClass('menutext2');
        }
    });
});

请注意，为了使其正常工作，我必须在您的

div1

、

div2

、

div3

等上应用

alldivs

类，并给出与其ID对应的菜单项类

此JSFIDLE中的演示：

编辑如果只想突出显示最近的菜单（我猜是固定菜单？），请使用以下命令：

$(document).scroll(function(e) {
    var scrolltop = $(window).scrollTop();
    var mindist = 1000;
    var closest = '';
    $('.alldivs').each(function(i, el){
        var thisdist = Math.abs(scrolltop - $(el).offset().top);
        if (thisdist < mindist) {
            closest = el.id;
            mindist = thisdist;
        }
    });
    if (closest != '') {
        $('.menutext2').toggleClass('menutext menutext2');
        $('.'+closest).toggleClass('menutext menutext2');
    }
});

$（文档）。滚动（功能（e）{
var scrolltop=$（窗口）.scrolltop（）；
var mindist=1000；
var最近值=“”；
$（'.alldivs'）。每个（函数（i，el）{
var thisdist=Math.abs（scrolltop-$（el.offset（）.top）；
如果（这个主义者

---

jsIDLE:

是的，您需要jQuery，但我不明白：当滚动条显示div1或单击div1时，您必须应用menutext2类吗

设置事件（单击或滚动并应用）

试试这样的

}))

---

我有一套要添加的

.menutext2

，在您向下滚动275px（大约在div2顶部）之后，应该不难从这里找到它。

是的，用jsFiddle完成了

用.addClass和.removeClass替换.css。 我使用DIV1-3的父div，因为您在它的父div上设置了一个高度

$(window).scroll(function(){
var top = $(window).scrollTop() + $(window).height();
var offsetDiv1 = $("#DIV1").offset().top;
var offsetDiv2 = $("#DIV2").offset().top;
var offsetDiv3 = $("#DIV3").offset().top;
if(top >= offsetDiv1 && top <= $("#DIV1").parent("div").height() + offsetDiv1){
   // alert(top);
     $("#menu").css("background", "black");   
}else if(top >= offsetDiv2 && top <= $("#DIV2").parent("div").height() + offsetDiv2){
   // alert(top);
     $("#menu").css("background", "blue");  
}else if(top >= offsetDiv3 && top <= $("#DIV3").parent("div").height() + offsetDiv3){
    //alert(top);
     $("#menu").css("background", "yellow");  
}else{
      $("#menu").css("background", "gray");    
}

$（窗口）。滚动（函数（）{
var top=$（窗口）.scrollTop（）+$（窗口）.height（）；
var offsetDiv1=$（“#DIV1”）.offset（）.top；
var offsetDiv2=$（“#DIV2”）.offset（）.top；
var offsetDiv3=$（“#DIV3”）.offset（）.top；
如果（top>=offsetDiv1&&top=offsetDiv2&&top=offsetDiv3&&top，您似乎希望与我在页面上实现的相同

看看菜单上的部分

根据你的要求试试这个

HTML

更新：

通用方法

$(function () {

    var menu = $('#menu'),
        menuText = menu.find('.menuText'),
        contentDiv = $('.contentDiv');

    $(window).scroll(function (e) {
        var win = $(this),
            scrollTop = $(this).scrollTop();


        //to make nav menu selected according to scroll
        var start = scrollTop;
        menuText.filter('.menutext2').removeClass('menutext2').addClass('menutext');
        for (var i = 0; i < contentDiv.length; i++) {
            var elm = $(contentDiv[i]),
                id = contentDiv[i].id,
                top = elm.offset().top,
                nextTop = elm.next().offset().top || 1000000000;
            if (start > top && start < nextTop) {
                menuText.filter('[linkId="' + id + '"]').removeClass('menutext').addClass('menutext2');
                break;
            }
        }

    });

$（函数（）{
变量菜单=$（“#菜单”），
menuText=menu.find（'.menuText'），
contentDiv=$（'.contentDiv'）；
$（窗口）。滚动（功能（e）{
var win=$（此），
scrollTop=$（this.scrollTop（）；
//根据滚动键选择导航菜单
var start=scrollTop；
menuText.filter（'.menutext2'）。removeClass（'menutext2'）。addClass（'menutext2'）；
for（var i=0；i顶部和开始<下一个顶部）{
menuText.filter（'[linkId=“'+id+'“]'））.removeClass（'menuText'）.addClass（'menutext2'）；
打破
}
}
});

第二种方法比第一种方法短且通用，但效率较低，因为每个时间循环都会进入scroll事件中，并且scroll事件的执行非常频繁

如果“.contentDiv”的数量较少，我更愿意采用第一种方法，否则采用第二种方法。
问题是什么？您尝试了什么？当我滚动到DIV1顶部时，例如，菜单样式中的第一个ul变为.menustyle2（在不同的词中，它变为红色）。代码中的
ul
元素在哪里？另外，您尝试过什么吗？它不是ul，而是div，但与ul（在菜单中）相同。是的，我尝试过此代码，但效果不好：$（文档）。滚动（函数（e）{var scrolltop=$（窗口）。滚动顶（）；var mindst=1000；var closest=''；$（'.alldivs'）。每个（函数（I，el）{var thisdist=Math.abs（scrolltop-$（el）.offset（）.top）；if（thisdist$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 275) {
    $(".menutext").addClass(
        "menutext2");
} else {
    $(".menutext").removeClass(
        "menutext2");
}

$(window).scroll(function(){
var top = $(window).scrollTop() + $(window).height();
var offsetDiv1 = $("#DIV1").offset().top;
var offsetDiv2 = $("#DIV2").offset().top;
var offsetDiv3 = $("#DIV3").offset().top;
if(top >= offsetDiv1 && top <= $("#DIV1").parent("div").height() + offsetDiv1){
   // alert(top);
     $("#menu").css("background", "black");   
}else if(top >= offsetDiv2 && top <= $("#DIV2").parent("div").height() + offsetDiv2){
   // alert(top);
     $("#menu").css("background", "blue");  
}else if(top >= offsetDiv3 && top <= $("#DIV3").parent("div").height() + offsetDiv3){
    //alert(top);
     $("#menu").css("background", "yellow");  
}else{
      $("#menu").css("background", "gray");    
}

<div id="menu">
    <div class="menutext" linkId="DIV1">Change the style of me to .mebutext2 on arriving to DIV1</div>
    <div class="menutext"  linkId="DIV2">Change the style of me to .mebutext2 on arriving to DIV2</div>
    <div class="menutext"  linkId="DIV3">Change the style of me to .mebutext2 on arriving to DIV3</div>
</div>

<br><br><br>

<div class="alldivs"><div class="contentDiv" id="DIV1">DIV1</div></div>
<br><br><br><br>
<div class="alldivs"><div class="contentDiv" id="DIV2">DIV2</div></div>
<br><br><br><br>
<div class="alldivs"><div class="contentDiv" id="DIV3">DIV3</div></div>

$(function(){

    var menu=$('#menu'),
        menuText=menu.find('.menuText'),
        DIV1=$('#DIV1'),
        DIV2=$('#DIV2'),
        DIV3=$('#DIV3'),
        DIV1Top=DIV1.offset().top,
        DIV2Top=DIV2.offset().top,
        DIV3Top=DIV3.offset().top;

$(window).scroll(function(e) {
    var win=$(this),
        scrollTop=$(this).scrollTop();


    //to make nav menu selected according to scroll
    var start=scrollTop;
    menuText.filter('.menutext2').removeClass('menutext2').addClass('menutext');
    if(start>DIV3Top){
        menuText.filter('[linkId="DIV3"]').removeClass('menutext').addClass('menutext2');
        }
    else if (start>DIV2Top){
        menuText.filter('[linkId="DIV2"]').removeClass('menutext').addClass('menutext2');
        }
    else if(start>DIV1Top){
        menuText.filter('[linkId="DIV1"]').removeClass('menutext').addClass('menutext2');
        }   
});
});

$(function () {

    var menu = $('#menu'),
        menuText = menu.find('.menuText'),
        contentDiv = $('.contentDiv');

    $(window).scroll(function (e) {
        var win = $(this),
            scrollTop = $(this).scrollTop();


        //to make nav menu selected according to scroll
        var start = scrollTop;
        menuText.filter('.menutext2').removeClass('menutext2').addClass('menutext');
        for (var i = 0; i < contentDiv.length; i++) {
            var elm = $(contentDiv[i]),
                id = contentDiv[i].id,
                top = elm.offset().top,
                nextTop = elm.next().offset().top || 1000000000;
            if (start > top && start < nextTop) {
                menuText.filter('[linkId="' + id + '"]').removeClass('menutext').addClass('menutext2');
                break;
            }
        }

    });