0

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

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

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 但不确定这是否是最好的方法，有人有什么想法吗？

4

1 回答 1

0

您好，您可以将 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();
     }
});
于 2018-10-22T08:59:07.737 回答