个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我是 jQuery 的新手，我在滚动事件中遇到了 addClass() 的问题。这是我的代码:
HTML:
<div class="sidebar">
<ul>
<li id="pop">Home</li>
<li>Programs</li>
<li>Replay</li>
</ul>
</div>
CSS:
.sidebar div {
width: 150px;
height: 250px;
float: right;
position: fixed;
z-index: 1;
}
.sidebar ul {
list-style-type: none;
padding-left: 0;
position: fixed;
}
.sidebar li {
background: gray;
color: white;
text-transform: uppercase;
font-size: 13px;
width: 80px;
}
.active {
width: 140px;
background: orange;
font-size: 25px;
}
jQuery:
$(document).ready(function() {
$(window).scroll(function() {
var st = $(this).scrollTop();
if( st > 500 ) {
$("#pop").addClass("active");
} else {
$("#pop").removeClass("active");
}
});
});
我也尝试过使用 toggleClass() 但没有成功。我不知道是什么阻止了它的工作。
预先感谢您的帮助。
最佳答案
像这样改变:
样式:
删除这个:
.sidebar li {
background: gray;
color: white;
text-transform: uppercase;
font-size: 13px;
width: 80px;
}
并添加:
.normal {
font-size: 13px;
background: gray;
color: white;
text-transform: uppercase;
width: 80px;
}
.active {
width: 140px;
background-color:orange;
font-size: 25px;
text-transform: uppercase;
color: white;
}
HTML :
将 normal 类添加到 lis
<ul>
<li id="pop" class="normal">Home</li>
<li class="normal">Programs</li>
<li class="normal">Replay</li>
</ul>
Jquery :
$(document).ready(function(){
$(window).on("scroll",function() {
if($(this).scrollTop() > 500)
$("#pop").removeClass("normal").addClass("active");
else
$("#pop").removeClass("active").addClass("normal");
})
})
最终代码:
<html>
<title>This is test</title>
<head>
<style>
body {
height: 2500px;
}
.sidebar div {
width: 150px;
height: 250px;
float: right;
position: fixed;
z-index: 1;
}
.sidebar ul {
list-style-type: none;
padding-left: 0;
position: fixed;
}
.normal {
font-size: 13px;
background: gray;
color: white;
text-transform: uppercase;
width: 80px;
}
.active {
width: 140px;
background-color:orange;
font-size: 25px;
text-transform: uppercase;
color: white;
}
</style>
</head>
<body>
<div class="sidebar">
<ul>
<li id="pop" class="normal">Home</li>
<li class="normal">Programs</li>
<li class="normal">Replay</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).on("scroll",function() {
if($(this).scrollTop() > 500)
$("#pop").removeClass("normal").addClass("active");
else
$("#pop").removeClass("active").addClass("normal");
})
})
</script>
</body>
</html>关于javascript - 滚动事件上的 jQuery .addClass() 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39336586/
25
4
0
如何使用 anchor 点击 addClass 和元素 addClass 一对一？ 如何使用 jQuery add Class 和 removeClass 以及 JavaScript？ one anc
我遇到了一个小问题。尝试更改样式/添加样式时，我不断收到以下错误: Object Gold has no method 'addClass' 这是我的 .js 文件中的代码: function Ge
有时我想在某些情况下在链中添加类。什么值在语义上最适合不添加类？ 例子: $(".element").doSomething().addClass(condition ? "special-class
我有几个使用 Angular 执行动画的实例。 它们几乎相同 - 但一个有效，另一个无效 - 我无法确定第二个无效。 以下是有效的指令: - 它本质上为 element 中的一堆子元素设置动画。
我不确定 jQuery 类方法(addClass、removeClass 和toggleClass)是否充当标准 classList 方法的包装器，它们看起来与我非常相似: http://api.jq
我正在尝试编写这个脚本: 如果元素高度大于226，则addClass“portrait”，否则addClass“landscape” 我有这个: var assetHeight = $("video.
我正在尝试制作一个 slider 。我有四个内容，我把它们一个接一个地做成不可见的。然后我有一个名为 active-client 的类，它具有 display: flex 属性。我用 jQuery 的
请参阅下面的编辑。当我的验证 jquery/javascript 很差时，问题就出现了。从那以后，我实现了一个新的 css 类，它应该负责处理单个元素编辑之前所做的事情。同样，我的 jquery 验证
我正在使用这个 website 中的 JQuery eventcalendar 插件. 我的事件有开始日期和结束日期，我有以下代码在日历上添加一个绿色方 block (一个用于开始日期，一个用于结束日
我正在尝试使用 addClass 在 Joomla 模板上提供斑马条纹表格。我使用以下代码: jQuery(function($) { $("tr:odd").addClass("od
它的作用: $('p').addClass('bar'); 输出: 我需要什么: 那么是否可以将类添加到元素的第一个位置？ 编辑(上下文):现在最后一个类有一个分割功能。如果添加另一个类，它也会
如何淡入淡出 .addClass。 这是链接 - http://www.bikramyogajoondalup.com.au/about-bikram-yoga/postures-benefits.h
我想创建这样的 HTML 元素 我使用javascript代码$('div').append(Array(3).fill($('test')).map((el, in
我有一组按钮，默认加载时没有我希望它们具有的类(来自第 3 方站点)。每次我单击按钮时，按钮都会发生变化 - 它们是用于滚动 的数字 (1 - 21)但它们并非全部同时显示。因此，在单击它们后，我一
我可以做 $(this).children("a").addClass("class") 并且它工作正常，但是当我做 $(this).addClass( “class”) 它不起作用。我在鼠标悬停函数
为什么 addClass 不起作用？单击带有 step 类的 div 时，div 背景和字体颜色应该发生变化，但没有任何反应。 .currentstep { bac
我有以下 html People 其中“a”的 CSS 为 color:#999999; font-size:31px; 我正在尝试使用 jQuery 来使用只有“color:#77
我有 Audi Select all 100 80 我尝试这样写: $(".select_all").click() { var models = $(this).parent().n
我有一个 style="display:none" 的 div。当鼠标悬停在链接上时，我想通过添加带有 display=block 的类来显示它，但它不起作用。 最佳答案 你需要在类中使用!impor
我使用这个CSS fa-info { background-color: green; font-size: 30px; } fa-info .active { background-co
我是一名优秀的程序员,十分优秀！