Question

我正在创建一个单页网站，并希望显示或隐藏依赖于视图端口中可见的部分ID或元素的按钮。

我有一个主页按钮，当用户向下滚过技术上的主页时，我需要显示该按钮。我正在使用scrollify将卷轴捕捉到高度值为100vh的部分。

我有一个函数来检测有问题的元素是否在视图中，但是按钮显示或隐藏与加载的页面相关，而不是通过搜索可以告诉按钮显示或隐藏的元素。

我正在使用div类文本来确定是否显示或隐藏主页按钮有没有办法让jquery更新并在用户滚动或移动页面时重新启用该功能？有问题的网页现已登陆www.testsiteclash.co.uk

由于

jquery的

    $.fn.inView = function(inViewType){
        var viewport = {};
        viewport.top = $(window).scrollTop();
        viewport.bottom = viewport.top + $(window).height();
        var bounds = {};
        bounds.top = this.offset().top;
        bounds.bottom = bounds.top + this.outerHeight();
        switch(inViewType){
          case 'bottomOnly':
            return ((bounds.bottom <= viewport.bottom) && (bounds.bottom >= viewport.top));
          case 'topOnly':
            return ((bounds.top <= viewport.bottom) && (bounds.top >= viewport.top));
          case 'both':
            return ((bounds.top >= viewport.top) && (bounds.bottom <= viewport.bottom));         
          default:     
            return ((bounds.top >= viewport.top) && (bounds.bottom <= viewport.bottom));        
        }
    };

    $(document).ready(function(){
        if($('.text').inView( 'both' ) == true ){

            $('.home-btn').css('display','none');

        }else if($('#section_1').inView( 'both' ) == false ) {

            $('.home-btn').css('display','block');

        }

    });

HTML / PHP的

    <?php get_header(); ?>
    <article id="section_1">
        <section class='section' data-section-name="Devon Food Movement">
            <div class="container">
                <div class="logo">
                    <div class="logo-image">
                    </div>

                </div>
                <div class="text">
                <h1>Devon Food Movement</h1>
                    <h2>Website under construction <br class="textbreak">follow us below on ...</h2>
                </div>
                <div class="icons">
                    <div class="icon1"><a href="https://www.linkedin.com/in/luke-fearon-853606158/" target="_blank"></a></div>
                    <div class="icon2"><a href="http://testsiteclash.co.uk/contact"></a></div>
                    <div class="icon3"><a href="https://www.instagram.com/_u/five_mile_food" target="_blank"></a></div>
                    <div class="icon3m"><a href="instagram://user?username=five_mile_food"></a></div>
                </div>

            </div>
        </section>
    </article>
    <article id="section_2">
        <section class='section' data-section-name="Contact">
        <?php
        if (have_posts()) : 
        while (have_posts()) : the_post();

        get_template_part('form');

        endwhile; 

        else: 
            echo '<p>No Content found</p>';
        endif;

        ?>
        </section>
    </article>
    <div class="home-btn"><a href="http://testsiteclash.co.uk/"><i class="fas fa-home"></i></a></div>
    </body>
    </html>

Answer 1

添加滚动功能现在全部正常工作，noob警告哈哈！

        $(document).scroll(function(){
        if($('.text').inView( 'both' ) == true ){

            $('.home-btn').css('display','none');

        }else if($('#section_1').inView( 'both' ) == false ) {

            $('.home-btn').css('display','block');

        }

    });

Answer 2

这是一个简单的示例，展示了如何使用window.scroll事件来检测是否显示/隐藏按钮。

＆＃13;

var currPos=1, lastPos=0, scrollDir='dn';
var triggerPos = $('#myTrigger').offset().top;
$(window).scroll(function(){
   currPos = $(window).scrollTop();
   $('#d2').html(currPos); //unnecc - displays current scroll position for you
   scrollDir =  (currPos > lastPos) ? 'dn' : 'up';
   lastPos = currPos;
   if (scrollDir=='dn'){
      if (currPos > triggerPos) $('#btnSpecial').fadeIn(100);
   }else{
      if (currPos < triggerPos) $('#btnSpecial').fadeOut(100);
   }
});

＆＃13;

.dPage{width:100vw;height:100vh;}
#d1{background:palegreen;}
#d2{background:bisque;}
#d3{background:lightpink;}
#d4{background:purple;}
#d5{background:lightblue;}
#btnSpecial{display:none;position:fixed;top:30px;right:100px;padding:10px;background:dodgerblue;color:white;font-size:2.3rem;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dPage" id="d1"></div>
<div class="dPage" id="d2"><div id="myTrigger"></div></div>
<div class="dPage" id="d3"></div>
<div class="dPage" id="d4"></div>
<div class="dPage" id="d5"></div>
<button id="btnSpecial">La Button</button>

＆＃13;

jQuery - 依赖于视口

2 个答案: