0

我在实现带有向下滑动面板的固定标题时遇到了一些麻烦，当您向下滚动页面时，该面板也保持固定。当向下滑动面板打开时，页面在标题下滚动，但我希望向下滑动的内容/表单在活动时保持固定在其位置，以便只有页面内容滚动。 

//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;
}
4

1 回答 1

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>

干杯

于 2013-08-10T09:24:12.603 回答