到达div时更改ul样式（滚动） [英] Change ul style when arriving to div(scrolling)

问题描述

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

I would like to change a ul style on scrolling and arrive to div using jQuery, explanation down.

CSS：

#menu {
    background-color:#ccc;
    position:fixed;
    width:100%;
}

.menutext {
    padding:25 40 30 !important;
    display:inline-block;
}

.menutext2 {
    padding:25 40 0 !important;
    display:inline-block;
    color:red;
}

.alldivs {
    width:300px;
    height:200px;
    background-color:a9a9a9;
}

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>

我想在滚动和到达时将menutext类的div改为menutext2到div的顶部（第一个ul的类从menutext1到menutext2在到达具有ID DIV1的div时，第二个ul的类从menytext1更改为menutext2，到达具有ID DIV2的div，第一个ul的类返回到menutext1

I want to change the div with the class "menutext" to class "menutext2" on scrolling and arriving to the top of the divs(first ul's class change from menutext1 to menutext2 on arriving to the div with the id DIV1, second ul's class change from menytext1 to menutext2 on arriving to the div with the id DIV2 AND the first ul's class return to menutext1 AS IT WAS and so on.

推荐答案

这应该做你想要的，只使用jQuery：

This should do what you're asking, using only 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 上应用 alldivs div3 等，并给出与其ID相对应的菜单项类。

Note that to make it work I had to apply the alldivs class on your div1, div2, div3, etc. and give the menu items classes corresponding to their IDs.

在此jsFiddle中演示： http://jsfiddle.net/ss7YF/

Demo in this jsFiddle: http://jsfiddle.net/ss7YF/

EDIT 如果您只希望突出显示最接近的一个（对于我正在猜测的固定菜单），请使用：

EDIT If you want only the closest one to be highlighted (for a fixed menu I'm guessing?) use this:

$(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');
    }
});

jsFiddle： http://jsfiddle.net/ss7YF/1/

jsFiddle: http://jsfiddle.net/ss7YF/1/

这篇关于到达div时更改ul样式（滚动）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！