html - 修复了窗口中的“返回顶部”按钮，例如当 HTML 页面滚动 200 像素时可见

Question

我正在一个网站上工作，想知道是否有任何代码可以添加到“固定在窗口”项目中，例如，一旦访问者滚动 200 像素，该项目就会可见。

在任何其他问题中都找不到专门针对此的任何内容。

干杯

我的错，我发现了这个，也许这就是我正在寻找的使用 jQuery 仅在滚动位置介于 2 点之间时才显示 div。如我错了请纠正我 ：-）

Answer 1

您可以使用 j Query 检测滚动位置，然后如果移动滚动隐藏您的 div。下面给出的是示例代码。请查看它并根据您的要求对其进行一些工作，它对我来说很好。

    <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
            <script type='text/javascript'>//<![CDATA[ 
            $(window).load(function(){
            $(function() {
                $.fn.scrollBottom = function() {
                    return $(document).height() - this.scrollTop() - this.height();
                };

                var $el = $('#sidebar>div');
                var $window = $(window);
                var top = $el.parent().position().top;

                $window.bind("scroll resize", function() {
                    var gap = $window.height() - $el.height() - 10;
                    var visibleFoot = 172 - $window.scrollBottom();
                    var scrollTop = $window.scrollTop()

                    if (scrollTop < top + 10) {
                        $el.css({
                            top: (top - scrollTop) + "px",
                            bottom: "auto"
                        });
                    } else if (visibleFoot > gap) {
                        $el.css({
                            top: "auto",
                            bottom: visibleFoot + "px"
                        });
                    } else {
                        $el.css({


                            //use your css property here if you want to display none a div
                            display: none,
                            bottom: "auto"



                        });
                    }
                }).scroll();
            });
            });//]]>  

            </script>