Question

我在使用下滑面板实现固定标题时遇到一些问题，当您向下滚动页面时，该面板也会保持固定状态。当向下滑动面板打开时，页面在标题下滚动，但我希望向下滑动的内容/表单在活动时保持固定在其位置，以便仅滚动页面内容。

//slide down panel css    
#sliding_panel {
background: #6C9D30;
height: 0;
position: relative;
overflow: hidden;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
color: #fff;
}

//fixed header css
header#header {
position:fixed;
width: 100%;
height: 100px;
background: rgba(0,0,0,0.5);
z-index: 1;
}

Answer 1

注意到您有半透明标题，因此您可以看到文本在其下方滚动。不确定是否有意！我已经把一个带有固定滑动面板的固定割台的一个非常简单的例子放在一起，希望这就是你要找的东西。

var context = $('#header');

context.find('.togglePanel').on('click', function (e) {
    e.preventDefault();
    context.find('#sliding_panel').show();
    context.find('.togglePanel').hide();
});

context.find('.togglePanelClose').on('click', function (e) {
   e.preventDefault();
   context.find('#sliding_panel').hide();
   context.find('.togglePanel').show();
});

body {
  height: 100%;
  margin:0;
}
#sliding_panel {
  background: #6C9D30;
  height: 50px;
  position: relative;
  overflow: hidden;
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
  -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
  color: #fff;
  margin-top:80px;
  display: none;
}

header#header {
  position:fixed;
  width: 100%;
  height: 100px;
  background: #ccc;
  z-index: 999;
  top:0;
}
a.togglePanel {
  text-decoration: none;
  text-align:center;
  margin: 20px auto;
}
.content {
  padding-top:100px;
  line-height:90px;
  z-index: 888;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<body>
    <header id="header">
        <a href="#" class="togglePanel">Open panel</a>
        <div id="sliding_panel">hello there!
             <a href="#" class="togglePanelClose">Close panel</a>
        </div>
    </header>
    <div class="content">
        this is some text ... <br>
        this is some text ... <br>
        this is some text ... <br>
        this is some text ... <br>
        this is some text ... <br>
        this is some text ... <br>
        this is some text ... <br>
        this is some text ... <br>
        this is some text ... <br>
        this is some text ... <br>
        this is some text ... <br>
        this is some text ... <br>
        this is some text ... <br>
        this is some text ... <br>
        this is some text ... <br>
        this is some text ... <br>
        this is some text ... <br>
        this is some text ... <br>
    </div>
</body>
</html>

干杯

当您向下滚动页面时，带有向下滑动面板的固定标题也会保持固定状态

1 个答案: