Question

我只知道编码的基础知识，而且我在这里遇到了死胡同。是否有一个简单的代码，说明如何在几个像素之后滚动显示某些内容？

你可以在这里看到我的意思http://cocorrinanewtemplate.blogspot.gr 固定的灰色面包条应该有一个菜单只有在滚动300px时才能看到（那时主菜单不再可见）

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

Answer 2

您需要使用 jQuery函数 .scroll（）

您必须计算滚动过程中的位置，当您从顶部开始处于300px时，请执行您的逻辑。

Answer 3

我相信这个脚本可能适合你：

<script type="text/javascript">
                $(document).ready(function(){ 

                $(window).scroll(function(){
                    if ($(this).scrollTop() > 100) {
                        $('.classid').fadeIn();
                    } else {
                        $('.classid').fadeOut();
                    }
                }); 
     </script>

这是你在闪烁的问题只是删除这个脚本，你会没事的：

<script type='text/javascript'>                                                                            

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


    });

</script>

元素仅在300px滚动后才可见

3 个答案: