使用畫布解決方案時，如何保持固定的標頭與身體的其余部分一起流動？

Question

我正在使用headhesive插件，它確實很漂亮，但是我無法使其與我正在使用的畫布外導航配合使用。 如您所見，標題現在重疊了，它應該與其余內容一起移動。 我嘗試在下面的.masthead--clone選擇器中更改position屬性，但這沒有用。 我也嘗試過簡單地將元素移動到html中，但是效果不佳。 有什么建議么？

.masthead--clone {
/* Required styles */

position: fixed;
top: 0;
left: 0;
background: #fcf6e9;  
border-bottom: 1px solid rgba(253, 246, 232, .5)!important;
box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
/* Translate -100% to move off screen */

-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
/* Animations */

-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}

Answer 1

將此添加到您的javascript文件

$( ".masthead--clone" ).click(function() {
  $( this ).toggleClass("pushRight");
});

將此添加到您的CSS樣式表

.pushRight{
transform: translateX(280px);
}

每當您單擊漢堡包圖標時，Javascript / JQuery都會將類切換到菜單欄。 該課程會將您的菜單欄推到右側。