滚动到页面顶部时如何隐藏按钮？

Question

我正在尝试使此JSFiddle适应当我在页面顶部时隐藏网站上的菜单按钮，并在我开始向下滚动时显示它。

我修改了JS以使其与我网站上的CSS匹配。 然后将其放在页面顶部的标签中

var $scb = $('<div class="toggle-menu-wrap"></div>');
$('.top-header').append($scb);
var $ccol = $('.content');

$ccol.scroll(function(){
    $scb.stop(true,true).fadeTo(500, $ccol.scrollTop() > 10 ? 1 : 0);
});

但是，它仍然不起作用。 我在修改JS以适合CSS方面是否犯了错误？

Answer 1

1. 您可以从头开始在HTML中包含toggle-menu-wrap元素。 无需使用JS插入。

2. 编写所需的一行CSS，即从一开始就隐藏元素

   .toggle-menu-wrap {显示：无； }

3. 您的jQuery版本使用'jQuery'而不是'$'进行引用。 我还要像这样重新编写您的JS：

    jQuery(document).ready(function() { fadeMenuWrap(); jQuery(window).scroll(fadeMenuWrap); }); function fadeMenuWrap() { var scrollPos = window.pageYOffset || document.documentElement.scrollTop; if (scrollPos > 300) { jQuery('.toggle-menu-wrap').fadeIn(300); } else { jQuery('.toggle-menu-wrap').fadeOut(300); } } 

Answer 2

就像上面评论中的@ murli2308一样，您需要将滚动事件侦听器附加到窗口：

$(document).ready(function () {
    var $scb = $('<div class="scroll-border"></div>');
    $('.above').append($scb);
    var $ccol = $('.content');

    $(window).scroll(function(){
        $scb.stop(true,true).fadeTo(500, $ccol.scrollTop() > 10 ? 1 : 0);
    });
})

将代码包装在$(document).ready()也是一个好主意。

$ccol.scroll(function() { ...可以在该小提琴中工作的原因是因为CSS：

.content{
    height: 200px;
    width: 200px;
    overflow: auto;
}

通知overflow: auto; 。 这将使该特定div可滚动。 但是，在您的网站上，滚动整个页面，而不是$ccol 。 这意味着事件处理程序将永远不会触发滚动事件（因为$ccol将永远不会滚动）。

Answer 3

您可能已经忘记链接Jquery。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

链接到您的头部标签内，以防万一.....

Answer 4

这应该做的工作：

$(window).scroll(function(e){
    if ($(this).scrollTop() > 0) {
        $(".your_element").css("display", "block");
    } else {
        $(".your_element").css("display", "none");
    }
});