时间戳

首页 > 解决方案 > jQuery | 在窗口滚动时保持顶部 div 元素在视图中

javascript - jQuery | 在窗口滚动时保持顶部 div 元素在视图中

问题描述

我有一个带有类的 div 元素，.b-widget并且出现在页面顶部。当 Iscroll down时， div 消失，当 Iscroll up再次出现时。我希望它在 i 时保持原位并在 iscroll 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>

标签： javascriptjquery

解决方案

像这样使用CSS：

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

推荐阅读