当用户滚动页面时，如何使 div 元素在页面上上下移动？（该元素始终可见）
滚动页面时如何使 <div> 上下移动？
IT技术
javascript
jquery
css
html
2021-02-21 04:44:51
6个回答
您希望将固定属性应用于元素的位置样式。
position: fixed;
你用的是什么浏览器？并非所有浏览器都支持 fixed 属性。阅读更多关于谁支持它，谁不支持它以及一些在这里工作的信息
http://webreflection.blogspot.com/2009/09/css-position-fixed-solution.html
只是为了一个更动画和可爱的解决方案：
$(window).scroll(function(){
$("#div").stop().animate({"marginTop": ($(window).scrollTop()) + "px", "marginLeft":($(window).scrollLeft()) + "px"}, "slow" );
});
和那些想看的人的笔：http : //codepen.io/think123/full/mAxlb和叉子：http : //codepen.io/think123/pen/mAxlb
更新：和非动画 jQuery 解决方案：
$(window).scroll(function(){
$("#div").css({"margin-top": ($(window).scrollTop()) + "px", "margin-left":($(window).scrollLeft()) + "px"});
});
position:fixed当您的页面顶部没有标题或徽标时，单独使用就可以了。此解决方案将考虑窗口滚动的距离，并在您滚动超过标题时移动 div。当您再次到达顶部时，它会将其锁定回原位。
if($(window).scrollTop() > Height_of_Header){
//begin to scroll
$("#div").css("position","fixed");
$("#div").css("top",0);
}
else{
//lock it back into place
$("#div").css("position","relative");
}
这是 Jquery 代码
$(document).ready(function () {
var el = $('#Container');
var originalelpos = el.offset().top; // take it where it originally is on the page
//run on scroll
$(window).scroll(function () {
var el = $('#Container'); // important! (local)
var elpos = el.offset().top; // take current situation
var windowpos = $(window).scrollTop();
var finaldestination = windowpos + originalelpos;
el.stop().animate({ 'top': finaldestination }, 1000);
});
});
只需添加position: fixed;您的 div 样式。
我已经检查过它在我的代码中工作正常。