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

问题描述

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

CSS:

#menu {背景颜色:#ccc;位置:固定；宽度:100%；}.menutext {填充:25 40 30 ！重要；显示:内联块；}.menutext2 {填充:25 40 0 ！重要；显示:内联块；红色;}.alldivs {宽度:300px；高度:200px；背景色:a9a9a9；}

HTML 代码:

<div class="menutext">到达 DIV1 时将我的样式更改为 .mebutext2</div><div class="menutext">到达DIV2时将me的样式改为.mebutext2</div><div class="menutext">到达 DIV3 时将我的样式更改为 .mebutext2</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 的类在到达 ID 为 DIV1 的 div 时从 menutext1 变为 menutext2，第二个ul 的类在到达 ID 为 DIV2 的 div 时从 menytext1 更改为 menutext2，并且第一个 ul 的类返回到 menutext1 原样，依此类推.

解决方案

这应该可以满足您的要求，仅使用 jQuery:

$(document).scroll(function(e) {var 检测范围 = 50;//它需要离屏幕顶部多近var scrolltop = $(window).scrollTop() + 检测范围；$('.alldivs').each(function(i, el){if (scrolltop > $(el).offset().top) {$('.'+el.id).removeClass('menutext').addClass('menutext2');}});});

请注意，要使其工作，我必须在您的 div1、div2、div3 上应用 alldivs 类> 等，并给出与其 ID 对应的菜单项类.

在这个 jsFiddle 中的演示:http://jsfiddle.net/ss7YF/

编辑如果您只想突出显示最接近的一个(我猜是固定菜单?)使用这个:

$(document).scroll(function(e) {var scrolltop = $(window).scrollTop();var 思想家 = 1000;var 最接近 = '';$('.alldivs').each(function(i, el){var thisdist = Math.abs(scrolltop - $(el).offset().top);如果 (thisdist < mindist) {最近 = el.id;思想主义者 = thisdist;}});如果(最近的！= ''){$('.menutext2').toggleClass('menutext menutext2');$('.'+closest).toggleClass('menutext menutext2');}});

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

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 code:

<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>

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.

解决方案

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

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.

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

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/

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