jQuery |在窗口滚动时保持top div元素在视图中

Question

我有一个类为.b-widget的div元素，它位于页面顶部。当Iscroll down时，div消失，当Iscroll up时，它再次出现。我希望它在我scroll down时保持原位，在我scroll up时恢复。

我在script下面写道，但这也无济于事：

<script>
//keep element in view
(function($)
{
$(document).ready( function()
{
var elementPosTop = $('.b-widget').position().top;
$(window).scroll(function()
{
var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
//if top of element is in view
if (wintop > elementPosTop)
{
//always in view
$('.b-widget').css({ "position":"fixed", "top":"50px" });
}
else
{
//reset back to normal viewing
$('.b-widget').css({ "position":"inherit" });
}
});
});
})(jQuery);
</script>

Answer 1

使用如下css：

.b-widget{
position: fixed;
width: 100%;
top: 0;
left: 0;
}