How to hide/show fixed element in some sections in my html page?-CodePudding

I want that fixed element #logoimode3 show/hide on some sections.

Example: Show #logoimode3 on #section2 and #section3 Hide #logoimode3 on #section1 and #section4 And need to hide also in small screen.

So fixed element have to disapear on blue section. And than show again on green section. I want my logo to disapear while scrolling trought section 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"  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>

CodePudding user response：

here i have added code for

$(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>

showing and hiding div on click with animation effect

CodePudding user response：

Please try below code :

<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"  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/