随着浏览器滚动，页面组件跟着滚动的效果

最新推荐文章于 2026-02-18 01:14:45 发布

原创最新推荐文章于 2026-02-18 01:14:45 发布 · 484 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被以下社区和专栏收录：

本文介绍了一种使用JavaScript和jQuery动态调整网页元素位置的方法，通过监听滚动条的位置来实时更新元素的绝对定位，确保元素始终处于预设的可视区域内。

function setModelPostion(){
        //获取window对象
	var $window = $(window);
    
	//获取浏览器滚动条所在位置距离最上方的距离
        var window_top = $window.scrollTop();
        //设置一个你想要距离浏览器上方的值
        var header_top = 35;
        //设置定位
        $("#outCarousel").css({"position":"absolute","top":window_top+header_top});
        //绑定事件，每次浏览器条滚动，则跟着改变位置
        $(function(){
            $window.scroll(function() {
                var window_top = $window.scrollTop();
                var header_top = 35;
                $("#outCarousel").css({"position":"absolute","top":window_top+header_top});
            });
        });
}

标签