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

【问题标题】：How to hide/show fixed element in some sections?如何在某些部分隐藏/显示固定元素？
【发布时间】：2019-05-17 17:25:15
【问题描述】：

我希望固定元素 #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>

【问题讨论】：

你的脚本在哪里？
你的页脚和图片标签应该在正文中
这是一个错误。
--> 这只适用于在页脚区域隐藏它
这不起作用：

标签： javascript jquery html css

【解决方案1】：

获取部分的高度，当部分顶部达到 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>

【讨论】：

【解决方案2】：

有你需要的完整代码

<!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>

【讨论】：

好的，很高兴为您提供帮助
您知道为什么这段代码在 Safari 浏览器中不起作用吗？（但它在 Crome、Firefox、...中工作正常） - 当我检查控制台日志（srollTop、heights、...）时，数字不会改变。谢谢
改成： $(window).scroll(function() { var scrollTop = $(window).scrollTop(); 现在它可以工作了

【解决方案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>

【讨论】：