javascript - 元素仅在滚动 300 像素后可见

Question

我只知道编码的基础知识，但我在这里遇到了死胡同。是否有关于如何仅在滚动几个像素后才显示某些内容的简单代码？

你可以在这里明白我的意思http://cocorrinanewtemplate.blogspot.gr固定的灰色货车栏应该只有在滚动 300 像素时才可见的菜单(即主菜单不再可见时)

Answer 1

你可以试试这个。

HTML

<a href="javascript: void(0)" class="back-to-top"></a>

CSS

.back-to-top {display: none; width: 30px; height: 30px; position: fixed; bottom: 20px; right: 20px; z-index: 500;}

JavaScript

$(function(){
        $(window).scroll(function(e) {
            if($(this).scrollTop()>150){
                $('.back-to-top').fadeIn(1000); // Fading in the button on scroll after 150px
            }
            else{
                $('.back-to-top').fadeOut(500); // Fading out the button on scroll if less than 150px
            }
        });

        $('.back-to-top').click(function(e) {
            $('body, html').animate({scrollTop:0}, 800);
        });
    });