Question

我有一个按钮，只有在我的网页上有某个部分时才显示，当用户滚动浏览此部分时它会消失。

当用户点击该按钮时，该部分会弹出额外信息。问题是，这扩展了页面，然后按钮 - 如果接近该部分的末尾 - 消失。

＆＃13;

//App.js stuff--I'm setting a manual distance here for when the button should disappear

$(document).ready( function() {
    $("#detailButton").hide(); //hide your div initially
    var dbSearch = $("#search").offset().top;
    var contactPage = 4500;
    $(window).scroll(function() {
        if($(window).scrollTop() > dbSearch && $(window).scrollTop() < contactPage) { //scrolled past the other div?
            $("#detailButton").show(); //reached the desired point -- show div
        }
        else{
            $("#detailButton").hide();
        }
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
//Index.html stuff

<section id="search" class="search">
   ...//detailButton should be shown here 
</section>


<section id="contact" class="closing-header">
...//last part of page--detailButton show be hidden here
</section>

＆＃13;

我需要一种方法来确保按钮仅在移动到最后一部分时消失（#contact）。我怎么能这样做？

Answer 1

计算滚动功能的偏移量。

＆＃13;

//App.js stuff

$(document).ready( function() {
    $("#detailButton").hide(); //hide your div initially
   
    $(window).scroll(function() {
         var dbSearch = $("#search").offset().top;
         var contactPage = 4500;
        if($(window).scrollTop() > dbSearch && $(window).scrollTop() < contactPage) { //scrolled past the other div?
            $("#detailButton").show(); //reached the desired point -- show div
        }
        else{
            $("#detailButton").hide();
        }
    });
});

＆＃13;

//Index.html stuff

<section id="search" class="search">
   ...//detailButton should be shown here 
</section>


<section id="contact" class="closing-header">
...//last part of page--detailButton show be hidden here
</section>

＆＃13;

滚动时移动的按钮在单击时过早消失

1 个答案: