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

How can I hide a button when scrolled to the top of a page?

本文关键字：何隐藏 隐藏 按钮 滚动 顶部      更新时间：2023-09-26

我正在尝试调整这个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时犯了错误吗？

  1. 您可以从一开始就在HTML中包含切换菜单换行元素。没有必要使用JS插入它。

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

    .thoggle菜单换行｛显示：无；}

  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); 
    } 
}

就像@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永远不会滚动）。

您可能忘记链接Jquery。

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

将此链接到您的头标签中，以防。。。。。

这应该完成任务：

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