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

4

6 回答 6

2

这应该做你所要求的，只使用 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');
        }
    });
});

请注意，要使其正常工作，我必须在您的 、 、 等上应用该类，alldivs并为菜单项提供与其 ID 对应的类。div1div2div3

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

编辑如果你只想突出显示最近的一个（我猜是固定菜单？）使用这个：

$(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/

于 2013-04-03T02:24:18.520 回答
0

您可以使用YAHOOs YUI框架来编写类似这样的 javascript：

var Event = YAHOO.util.Event;

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

    if (document.getElementById("DIV1").scrollTop == 0) {
        document.getElementById("DIV1").className = "menutext2";
    }
}
于 2013-04-03T02:15:43.537 回答
0

是的，你需要jQuery，但我不明白：你必须在滚动条看到div1 或单击div1 时应用menutext2 类？

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

$('.menu').removeClass('menutext').addClass('menutext2');
于 2013-04-03T02:25:40.117 回答
0

是的，用 jsFiddle 完成了 试试这个

将 .css 替换为 .addClass 和 .removeClass。我使用 DIV1-3 的父 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");    
}

});

于 2013-04-04T03:37:17.703 回答
0

看来你想要的和我在我的页面上实现的一样。

查看http://s-yadav.github.com/contextMenu.html上的菜单部分

根据你的要求试试这个。

HTML

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

JS

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

    });

第二种方法更短更通用，但效率低于第一种，因为每次循环都会进入滚动事件。和滚动事件执行非常频繁。

如果 '.contentDiv' 的数量较少，我会更喜欢遵循第一种方法，否则遵循第二种方法。

于 2013-04-04T04:38:35.287 回答
0

尝试像这样的 jsFiddle

$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 275) {
    $(".menutext").addClass(
        "menutext2");
} else {
    $(".menutext").removeClass(
        "menutext2");
}

});

在您向下滚动 275 像素（接近 div2 的顶部）后，我有这个设置要添加.menutext2，从这里应该不难弄清楚。

于 2013-04-04T03:14:31.513 回答