Question

我希望固定元素＃logoimode3在某些部分显示/隐藏。

示例：在＃section1和＃section3上显示＃logoimode3 在＃section2上隐藏＃logoimode3

因此固定元素必须在蓝色部分消失。然后再在绿色部分显示。我希望我的徽标在滚动第2部分时消失。

<!DOCTYPE html>

<html>
<head>
<style></style>
<script></script>

</head>

<body>
      <img id="logoimode3" class="logo3" style="position:fixed;top:0px;left:0px;" src="https://imode.info/imode/slike/ikone/IMODE_znak-01.svg" alt="logo" height="" width="30px">

<section id="section1" style="background: red; height:100vh;"></section>
<section id="section2" style="background: blue; height:100vh;"></section>
<section id="section3" style="background: green; height:100vh;"></section>

</body>

<footer></footer>

</html>

Answer 1

您需要使用完整的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <img id="logoimode3" class="logo3" style="position:fixed;top:0px;left:0px;" src="https://imode.info/imode/slike/ikone/IMODE_znak-01.svg" alt="logo" height="" width="30px">

    <section id="section1" style="background: red; height:100vh;"></section>
    <section id="section2" style="background: blue; height:100vh;"></section>
    <section id="section3" style="background: green; height:100vh;"></section>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $(function() { 
            var $window = $(window);
            var logo = $('#logoimode3'); 
            var div1 = $('#section1'); 
            var div1_height = div1.height();

            $window.on(function() { 
                var scrollTop = $(window).scrollTop();
                var viewport_height = $window.height(); 
                var scrollTop_bottom = scrollTop + viewport_height;

                if (scrollTop > div1_height && (scrollTop_bottom <= div1_height * 3)) {
                    logo.css({'display' : 'none'});
                }
                else {
                    logo.css({'display' : 'block'});
                }

                // Work with Class
                /* if (scrollTop > div1_height && (scrollTop_bottom <= div1_height * 3)) {
                    logo.addClass('hidden');
                }
                else {
                    logo.removeClass('hidden');
                } */
            });
        });
    </script>
</body>
</html>

Answer 2

获取部分的高度，当部分的顶部达到0时，它会隐藏，而当部分的底部达到0时，它会再次显示

<!DOCTYPE html>

<html>

<head>
  <style></style>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script>
    jQuery(document).ready(function() {
      var sec2 = document.getElementById("section2");
      var pos = sec2.getBoundingClientRect();
      var height1 = pos.height * -1;
      if (pos.top < 1 && pos.top > height1) {
        jQuery('#logoimode3').hide();
      }
      else if(pos.top < height1 || pos.top > 1) {
        jQuery('#logoimode3').show();
      }
    });
    jQuery(window).scroll(function() {
      var sec2 = document.getElementById("section2");
      var pos = sec2.getBoundingClientRect();
      var height1 = pos.height * -1;
      if (pos.top < 1 && pos.top > height1) {
        jQuery('#logoimode3').hide();
      }
      else if(pos.top < height1 || pos.top > 1) {
        jQuery('#logoimode3').show();
      }
    });
  </script>

</head>

<body>
  <img id="logoimode3" class="logo3" style="position:fixed;top:0px;left:0px;" src="https://imode.info/imode/slike/ikone/IMODE_znak-01.svg" alt="logo" height="" width="30px">

  <section id="section1" style="background: red; height:100vh;"></section>
  <section id="section2" style="background: blue; height:100vh;"></section>
  <section id="section3" style="background: green; height:100vh;"></section>
  <section id="section4" style="background: pink; height:100vh;"></section>

</body>

<footer></footer>

</html>

Answer 3

    <script>

    jQuery(document).ready(function($) {

 $('#logoimode4').css({'display' : 'none'});

        $(function() { 



            var $window = $(window);
            var logo = $('#logoimode4'); 
            var div1 = $('#section1stran'); 
            var div2 = $('#section2stran');
            var div3 = $('#section3stran');
            var div4 = $('#section4stran');
            var div5b = $('#section5bstran');


            var div1_height = div1.height();
            var div2_height = div2.height();
            var div3_height = div3.height();
            var div4_height = div4.height();
            var div5b_height = div5b.height();


            $window.on('scroll', function() { 
                var scrollTop = document.documentElement.scrollTop; 
                var viewport_height = $window.height(); 
                var scrollTop_bottom = scrollTop + viewport_height;

             //   if (scrollTop >= 0 && (scrollTop_bottom <=  div1_height * 1.9 )) {
               //     logo.css({'display' : 'none'});
            //    }


              if (scrollTop >= div1_height * 0 + div1_height * 1 + div2_height + div3_height + div4_height + div5b_height && (scrollTop_bottom <=  div1_height * 5 + div1_height + div2_height + div3_height + div4_height + div5b_height )) {
                    logo.css({'display' : 'block'});
                }




                else {
                    logo.css({'display' : 'none'});
                }

                // Work with Class
                /* if (scrollTop > div1_height && (scrollTop_bottom <= div1_height * 3)) {
                    logo.addClass('hidden');
                }
                else {
                    logo.removeClass('hidden');
                } */
            });
        });

    });
    </script>

如何在某些部分中隐藏/显示固定元素？

3 个答案: