Question

我正在尝试在布局中实现一个固定的菜单按钮，每个部分都有其自己独特的菜单按钮，我希望每个部分在滚动时都能显示出来，但位置保持固定。

到目前为止，我有这个。...

body,html {
  margin:0;
  padding:0;
}

.menu {
  position:fixed;
  top:10px;
  left:10px;
}

.section1_menu, .section2_menu, .section3_menu, .section4_menu {
  position:fixed;
  top:10px;
  left:10px;
}

.section1_menu img, .section2_menu img, .section3_menu img, .section4_menu img, .menu img {
  width:50px;
  height:50px;
}

.section1 {
  display:flex;
  align-items:center;
  justify-content:center;
  background:teal;
  width:100%;
  height:100vh;
  color:white;
}

.section2 {
  display:flex;
  align-items:center;
  justify-content:center;
  background:wheat;
  width:100%;
  height:100vh;
  color:white;
}


.section3 {
  background:gold;
  width:100%;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}


.section4 {
  background:lightblue;
  width:100%;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

<div class="menu">
  <img src="https://png.icons8.com/dusk/1600/menu.png">
</div>
<div class="container">
  
  <div class="section1">
    <div class="section1_menu">
      <img src="https://png.icons8.com/wired/1600/menu.png">
    </div>
    This is the section 1 content
  </div>
  
  <div class="section2">
    <div class="section2_menu">
      <img src="https://png.icons8.com/ultraviolet/1600/menu.png">
    </div>
    This is the section 2 content
  </div>
  
  <div class="section3">
    <div class="section3_menu">
      <img src="https://png.icons8.com/nolan/1600/menu.png">
    </div>
    This is the section 3 content
  </div>
  
  <div class="section4">
    <div class="section4_menu">
      <img src="https://png.icons8.com/linen/1600/menu.png">
    </div>
    This is the section 4 content
  </div>
</div>

我正在努力研究如何实施展示，目前它们都正确放置，但彼此堆叠。如果可以在CSS中完成，那将是理想的选择，但也可以在需要时使用一些JS。

我看过CSS Clipping，但不确定这是否是最好的方法，任何人有什么想法吗？

Answer 1

您好，您可以在该功能中使用jQuery

请参见https://jsfiddle.net/gnmqwfck/

我只是使用滚动方法来提供解决方案

$(window).scroll(function() {
     var wH = $(window).height(),
         wS = $(this).scrollTop();
     if (wS > ($('.section1').offset().top+$('.section1').outerHeight()-wH)){
         $('.section1_menu').show();
         $('.section2_menu').hide();
         $('.section3_menu').hide();
         $('.section4_menu').hide();
     }
});

CSS-固定菜单按钮滚动显示

1 个答案: