Jquery在某个高度上进行div停止滚动

时间:2012-11-12 20:02:04

标签: jquery wordpress html

我试图使它成为servicewrapper div只滚动到一定高度并停在那里。你不能在页面上滚动更多。

我从这段代码开始:

$(window).scroll(function() {   
 if ($(window).scrollTop() >=380) 
{ 
    $(window).scrollTop(380); 
}
});

直到我注意到它停止了高度上所有页面上的所有滚动才完成了这个技巧。 所以我尝试了这个代码,以便规则只适用于servicewrapper div,但没有运气。你可以看到我在jquery hehe中没有专家。

$(window).scroll(function() {
 if $('#servicewrapper').scrollTop() >=380) 
{ 
    $('#servicewrapper').scrollTop(380); 
}
});

有办法做到这一点吗?一直在谷歌和堆栈上寻找一个关于这个的衣服,但我没有发现任何,至少不是我想要它是什么,我太多的菜鸟改变别人的代码。

先谢谢!

2 个答案:

答案 0 :(得分:0)

如果要控制容器内的滚动,则需要在该容器上调用scrollTop。在这种情况下,您似乎试图影响向下滚动整个页面,因此您的容器将是window。这部分是正确的。

如果我理解正确,则此脚本会插入您网站的多个页面中,并且您只想影响某些页面。如果是这种情况,您需要以某种方式识别该页面。如果只有目标页面有一个名为servicewrapper的元素,那么您可以使用:

if($('#servicewrapper').length) {
    $(window).scroll(function() {   
        if ($(window).scrollTop() >=380) { 
            $(window).scrollTop(380); 
        }
    });
}

工作示例:http://jsfiddle.net/MafPQ/

答案 1 :(得分:0)

我得到了它的工作!它只能在Firefox中使用,但经过一些调整后,它可以工作 IE,Safari,Firefox和Chrome。 这是代码:

JS:

$(window).scroll(function(){
    if  ($(window).scrollTop() > 200){
         $('#servicediv').css({position:'relative',top:200});
    } else {
         $('#servicediv').css({'top':30% });
        }
});

和CSS:

#servicediv {
margin-top: 100px;
top:80%;
width: 100%;
background:url(images/content_bg.png);
height: auto;
position: relative;
z-index: 800;
bottom: 0;
min-height: 450px;

}
#servicewrapper {
width: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
height: auto;

}

我回答我自己的问题,以防其他人有同样的问题并谷歌这个。 你必须调整规则以匹配你的c。 当你看到代码时,我猜很多你会看到facepalm。但它的工作。