Question

使用Javascript（或以编程方式编写CSS）构建简单浮动div的正确方法是什么它在顶部并且在向下滚动时始终可见？

现在我见过像this这样的例子。向下滚动时，您会看到div跳跃和延迟。当页面内容不是我的时候，我希望它始终处于最佳状态脚本将通过chrome扩展注入

能做到吗？像this这样的东西;但不太复杂，不依赖于页面内容

Answer 1

使用要保持在最前面的元素的class或id，您应该应用一些CSS规则，

例如，如果您的元素类是.topnavigation

你可以在jQuery中执行以下操作

<style>
.topnavigation {
    width:;/* add the width here */
    position:static;
}
.topnavigation.scrolling {
    position:fixed;
    top:0px;
}
</style>
<script>
$(window).scroll(function () { 
    if($(this).scrollTop() > 50) // change 50 to what you want (work out how far the nav is from the top of the page alraedy and add it there, that'll make it smoother transition)
    {
        $('.topnavigation').addClass('scrolling');
    } else {
        $('.topnavigation').removeClass('scrolling');
    }
});
</script>

如果你不能使用jQuery，你可以使用普通的javascript执行以下操作：

更新时间：2017年1月6日 我更新了这个以使用document.querySelector和Element.classList方法。所有现代浏览器和IE 10＆gt;支持这些方法。

window.addEventListener('scroll',checkPosition,false);
function checkPosition()
{
    // #theid or #theclass or standard element selector
    var xNAV = document.querySelector("#topnav"); 
    if(window.scrollY > 50)
    {
        xNAV.classList.add("scrolling");
    } else {
        xNAV.classList.remove("scrolling");
    }
}

Answer 2

使用JavaScript，确定您希望它何时浮动，然后添加css：position:fixed

Javascript浮动div，当向下滚动时总是在ontop上

2 个答案: