Question

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

我修改了JS以匹配my site上的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

您可以从一开始就在HTML中包含toggle-menu-wrap元素。没有必要使用JS插入它。
写下你需要的一行CSS，就是从头开始隐藏元素

.toggle-menu-wrap { display：none; }

您的jQuery版本使用＆＃39; jQuery＆＃39;而不是＆＃39; $＆＃39;引用自己。我也会重写你的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");
    }
});

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

4 个答案: