javascript - 如何向 tumblr 主题添加粘性元素？-6ren

javascript - 如何向 tumblr 主题添加粘性元素？

转载作者：行者123 更新时间：2023-11-28 06:56:56

所以我一直在制作一个基本的 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>

最佳答案

I've been trying to make the menu bar remain at the top as you scroll...

如果您只是希望您的元素在滚动时保持在顶部，您可以使用直接的 css 来实现。

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

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

关于javascript - 如何向 tumblr 主题添加粘性元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33459042/

文章推荐： css - 如何重叠 Drupal View 行

文章推荐： ios - 尝试删除覆盖时相机捕获崩溃

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何向 tumblr 主题添加粘性元素？