Question

所以我一直在做一个基本的tumblr主题（还没有添加帖子或其他任何东西）而且我一直在尝试让菜单栏在滚动时保持在顶部，但它不起作用。我不知道代码是错误还是我把JavaScript放在错误的地方？

<!DOCTYPE HTML>
<title>Title</title>
<style type="text/css">
#container {
position:fixed;
overflow:scroll;
overflow-x:hidden;
margin-left:375px;
margin-top:88px;
height:475px;
width:500px;
background-color:#ddd;
 }

 *,
*:after,
*::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

body {
margin: 0;
font-family: 'Open Sans', 'Helvetica Neue', Arial, Tahoma, sans-serif;
}


#color-1 {
margin: 0 auto;
padding: 1em 1em;
margin: 1em;
text-align: center;

}

#color-1 {
background: #bed0ff;
}


#nav-1 a {
position: relative;
display: inline-block;
margin: 5px 5px;
outline: none;
color: #fff;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 400;
text-shadow: 0 0 1px rgba(255,255,255,0.3); 
font-size: 1 em;
}

#nav-1 a:hover,
#nav-1 a:focus {
outline: none;
}


#nav-1 a::after {
display: block;

}

#nav-1 a::after {
margin-top: 5px;
width: 0;
height: 2px;
background-color: #fff;
content: '';
opacity: 0;
-webkit-transition: width 0.3s, opacity 0.6s;
-moz-transition: width 0.3s, opacity 0.6s;
transition: width 0.3s, opacity 0.6s; 

}

#nav-1 a:hover::after,
#nav-1 a:focus::after {
opacity: 1;
width: 100%;
}


#color-1.stick {
position: fixed;
top: 0;
z-index: 10000;
border-radius: 0 0 0.5em 0.5em;
}

</style>
<script type="text/javascript">
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#anchor').offset().top;
if (window_top > div_top) {
    $('#color-1').addClass('stick');
} else {
    $('#color-1').removeClass('stick');
}
}

$(function () {
$(window).scroll(sticky_relocate);
sticky_relocate();
});

</script>
</head>
<body>
<div id="container">


<div id="anchor"></div>
<div id="color-1">
<div id="nav-1">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>
 </div>
  text

</div>
</body>
</html>

Answer 1

我一直试图让菜单栏在滚动时保持在顶部...

如果您只想让元素在滚动时保持在顶部，则可以使用直接css执行此操作。

.sticky-element {
    position: fixed;
    top: 0;
    left: 0;
}

将sticky-element css添加到class您希望屏幕顶部有固定位置;也许#nav-1。

Answer 2

你在测试页面上没有jQuery，但我假设你在你的网站上有它但是如果没有那么那就是你的脚本无法运行的原因。我不确定你在做什么。但是我创建了你的测试页面并添加了jQuery，你的代码确实做了一些事情......如果你需要添加jQuery我建议使用google cdn。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

我建议将来打开开发面板f12或ctrl-shift-i并查看控制台是否存在脚本错误。希望这有点帮助。

如何将粘性元素添加到tumblr主题？

2 个答案: