31

我有一个带有以下 CSS 的 div.scroll_fixed

.scroll_fixed {
    position:absolute
    top:210px

}
.scroll_fixed.fixed {
    position:fixed;
    top:0;
}

当 div 到达页面顶部时，我使用以下 jQuery 代码设置 .fixed 类。

var top = $('.scroll_fixed').offset().top - parseFloat($('.scroll_fixed').css('margin-top').replace(/auto/, 0));

$(window).scroll(function (event) {
    // what the y position of the scroll is
    var y = $(this).scrollTop();

    // whether that's below the form
    if (y >= top) {
        // if so, ad the fixed class
        $('.scroll_fixed').addClass('fixed');
    } else {
        // otherwise remove it
        $('.scroll_fixed').removeClass('fixed');
    }
});

这对于垂直滚动固定非常有用。但是对于一个小的浏览器窗口，水平滚动会导致与此固定 div 右侧的内容发生冲突。

我希望 div 水平滚动内容。

谁能指出我正确的方向。仍然用 JS/JQuery 弄湿我的脚。

我基本上希望它像本例中的第二个框一样工作。

4

3 回答 3

23

该演示是保留元素 position:fixed并操作元素的left属性：

var leftInit = $(".scroll_fixed").offset().left;
var top = $('.scroll_fixed').offset().top - parseFloat($('.scroll_fixed').css('margin-top').replace(/auto/, 0));


$(window).scroll(function(event) {
    var x = 0 - $(this).scrollLeft();
    var y = $(this).scrollTop();

    // whether that's below the form
    if (y >= top) {
        // if so, ad the fixed class
        $('.scroll_fixed').addClass('fixed');
    } else {
        // otherwise remove it
        $('.scroll_fixed').removeClass('fixed');
    }

    $(".scroll_fixed").offset({
        left: x + leftInit
    });

});

使用leftInit考虑了可能的左边距。在这里试试：http: //jsfiddle.net/F7Bme/

于 2011-01-13T02:53:28.153 回答
21

您现在可能已经继续前进，但对于其他寻找水平可滚动固定元素解决方案的人来说，这是一个答案。创建这个 jquery 插件是为了解决这个确切的问题。

此演示使用购物车摘要，当固定在页面顶部时仍会水平滚动；而且，我还将它用于表格数据上方的标题：

演示： http: //jsfiddle.net/y3qV5/434/（更新）

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

用法：

$(document).ready(function() {
    $('#cart').scrollToFixed( { marginTop: 10 } );
});
于 2011-08-30T14:39:09.447 回答
9

使用 css 属性position:sticky来获取它。

这是文章解释和现场演示。

http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

唯一的缺点是浏览器兼容性。

于 2012-09-14T10:26:33.857 回答