如何在我的 html 頁面的某些部分隱藏/顯示固定元素？

Question

我希望在某些部分顯示/隱藏固定元素#logoimode3。

示例：在#section2 和#section3 上顯示#logoimode3 在#section1 和#section4 上隱藏#logoimode3 並且還需要在小屏幕中隱藏。

所以固定元素必須在藍色部分消失。 而不是再次顯示在綠色部分。 我希望我的徽標在滾動第 2 部分時消失。

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

在這里我添加了代碼

 $(document).ready(function(){ $("#hide").click(function(){ $("div").hide(1000); }); $("#show").click(function(){ $("div").show(1000); }); });

 div{ width:100px; height:100px; border-radius:50%; background-color:#9081c6; display:flex; align-self:center; align-items: center; justify-content: center; font-size:14px; margin-bottom:15px; }

 <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> <div>jquery</div> <button id="hide">Hide</button> <button id="show">Show</button> </body> </html>

使用 animation 效果在點擊時顯示和隱藏 div

Answer 2

請嘗試以下代碼：

<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() {
     jQuery('#logoimode3').hide();
    });


    $(document).scroll(function () {
        $('section').each(function () {
            if($(this).position().top <= $(document).scrollTop() && ($(this).position().top + $(this).outerHeight()) > $(document).scrollTop()) {
               if($(this).attr('id') == "section1" || $(this).attr('id') == "section4")
        {
            jQuery('#logoimode3').hide();
        }
        else
        {
            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>

For Demo: https://jsfiddle.net/fxjL7gmw/1/

如何在我的 html 頁面的某些部分隱藏/顯示固定元素？

問題描述

2 個解決方案

解決方案1
0 2022-09-22 06:07:32

解決方案2
0 2022-09-22 10:19:55

如何在我的 html 頁面的某些部分隱藏/顯示固定元素？

問題描述

2 個解決方案

解決方案1 0 2022-09-22 06:07:32

解決方案2 0 2022-09-22 10:19:55

解決方案1
0 2022-09-22 06:07:32

解決方案2
0 2022-09-22 10:19:55