具有向下滑動面板的固定標題，當您向下滾動頁面時，該面板也保持固定

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 個解決方案

解決方案1
1 2013-08-10 09:24:12

具有向下滑動面板的固定標題，當您向下滾動頁面時，該面板也保持固定

問題描述

1 個解決方案

解決方案1 1 2013-08-10 09:24:12

解決方案1
1 2013-08-10 09:24:12