Question

我对jquery很新，并且在更改滚动效果的CSS样式方面遇到了一些问题。

我有一个div，在页面加载时我想要修复到顶部：75px，但是一旦用户开始从顶部滚动超过75px，我想将其更改为位置：fixed top：0px。< / p>

现在我只能让它改变任何滚动动作，而不是等到它从顶部达到75px。

到目前为止，我的代码非常基本，因为我有点卡在这个特定部分。

        $(window).scroll(function () { 
              $("#side_bar").css("position", "fixed").css("top", "0px"); 

            });

理想情况下，我真的希望它可以滚动，直到#side_bar的底部触及页脚，然后从顶部向后滚动到75px时反转整个事物，使其更改回位置：static，top ：960x75像素

提前致谢！

Answer 1

jQuery Waypoints插件可让您轻松制作sticky elements。当您滚动到该元素时，他们通过添加sticky类（导致元素被修复）来实现该示例。

Answer 2

like this会为你做点什么。请注意，与您的问题不同，您实际上并不希望它固定为75px。如果发生这种情况，它永远不会滚动屏幕！你想要它相对，然后一旦它离开屏幕就固定。

//get the top of your sidebar based on its default position
var topOfSidebar = $("#sidebar").offset().top;

//when the window scrolls check to see whether it is about to go off screen. If so then switch to fixed.       
$(window).scroll(function() {
    var topOfWindow = $(window).scrollTop();
    if (topOfSidebar < topOfWindow) {
        $("#sidebar").addClass("sidebar2");          
    }
    else {
        $("#sidebar").removeClass("sidebar2");
    }
});

Answer 3

这是另一个jquery插件的演示，可以解决这个问题。该演示使用右侧浮动的购物车摘要滚动，直到它到达页面顶部的边距。该插件的描述如下：

此插件用于将元素固定到页面顶部，如果元素在垂直方向上滚动出视图;但是，它确实允许元素继续向左或向右移动水平滚动。

给定一个marginTop选项，一旦垂直滚动到达目标位置，该元素将停止垂直向上移动;但是，当页面向左或向右滚动时，元素仍将水平移动。页面向下滚动到目标位置后，元素将恢复到页面上的原始位置。

此插件已在Firefox 3/4，Google Chrome 10/11，Safari 5和Internet Explorer 8/9中进行了测试。

演示：http://jsfiddle.net/y3qV5/

插件和来源：https://github.com/bigspotteddog/ScrollToFixed

用法：

$(document).ready(function() {
    $('#cart').scrollToFixed();
});

jquery .scroll更改css

3 个答案: