使用画布解决方案时，如何保持固定的标头与身体的其余部分一起流动？

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都会将类切换到菜单栏。 该课程会将您的菜单栏推到右侧。