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

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

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