根据滚动位置更改/添加CSS类

Question

我正试图找到一个网站来展示和销售我的作品，需要一些关于页眉和菜单的帮助(两者都在同一个div中(，它们位于页面顶部，角度为45°，位于其他元素之上(在z-index 2处(。在滚动位置为0时，这很好，但当向下滚动到页面的其他文本元素和非背景图像时，这会成为障碍。我希望将这些元素移动到0旋转，并固定在页面顶部的任何滚动位置>300px，甚至复制它们，并根据这个位置显示一个，隐藏另一个。我可以自己做CSS部分，但脚本有点超出我的能力

我已经试过了(https://css-tricks.com/styling-based-on-scroll-position/(来更改CSS，但没有任何运气让它做任何事情。菜单本身通过另一个有效的javascript显示/隐藏。我尝试过的两个脚本和CSS都是外部链接的。

这是我当前拥有的代码：html:

<div class="bgimg-1">
</div>
<div class="base">
<h2>Site Name</h2>
<div>
<h3><a href="#" onclick="siteMenu()" class="dropbtn">Menu</a></h3>
</div>
<ul class="menu" id="content">
<li><a href="index.html">Home</a></li>
<li><a href="design.html">Design Services</a></li>
<li><a href="print.html">Artwork</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>

CSS是：

.base {
position: fixed;
top: 11rem;
left: -4rem;
width: 100%;
z-index: 2;
}
.base h2 {
width: 35%;
background: #000000;
padding: .25rem 1rem .25rem 3rem;
color: #FFFFFF;
transform: rotate(45deg);
font-family: novecento-sans-wide, sans-serif;
font-weight: 600;
}
.base h3 {
width: 20%;
transform: rotate(45deg);
background: #000000;
padding: .25rem 2rem .25rem 3rem;
margin-left: 3rem;
color: #FFFFFF;
font-family: novecento-sans-wide, sans-serif;
font-weight: 500;
}
.base a {
text-decoration: none;
color: #FFFFFF; 
}

Answer 1

使用jQuery对300px进行检测并添加一个类。为了让你觉得时髦，我添加了一个transition:all 1s;。既然你知道你的CSS，那就用一个简单添加的类来享受吧。干杯

$(document).scroll(function() {
if($(document).scrollTop() >= 300 ) {
$('.base h2').addClass('rotateback');
$('.base h3').addClass('rotateback');
} else {
$('.base h2').removeClass('rotateback');
$('.base h3').removeClass('rotateback');
}
});

body{
height:2000px;
}
.base {
position: fixed;
top: 11rem ; /* 11rem */
left: -4rem;
width: 100%;
z-index: 2;
}
.base h2 {
width: 35%;
background: #000000;
padding: .25rem 1rem .25rem 3rem;
color: #FFFFFF;
transform: rotate(45deg);
font-family: novecento-sans-wide, sans-serif;
font-weight: 600;
transition:all 1s;
}
.base h3 {
width: 20%;
transform: rotate(45deg);
background: #000000;
padding: .25rem 2rem .25rem 3rem;
margin-left: 3rem;
color: #FFFFFF;
font-family: novecento-sans-wide, sans-serif;
font-weight: 500;
transition:all 1s;
}
.base a {
text-decoration: none;
color: #FFFFFF; 
}
.base h2.rotateback {
transform: rotate(0deg);
}
.base h3.rotateback {
transform: rotate(0deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bgimg-1">
</div>
<div class="base">
<h2>Site Name</h2>
<div>
<h3><a href="#" onclick="siteMenu()" class="dropbtn">Menu</a></h3>
</div>
<ul class="menu" id="content">
<li><a href="index.html">Home</a></li>
<li><a href="design.html">Design Services</a></li>
<li><a href="print.html">Artwork</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>