当滚动到达锚点时使用JQuery更改CSS元素
当滚动到达锚点时使用JQuery更改CSS元素
提问于 2012-05-12 01:30:34
我目前有一个解决方案，可以在页面到达某个点时更改css元素，但我希望使用#锚点而不是像素值(1804)来响应较小的屏幕。我知道这一定很简单，但我不知道该怎么做：
$(document).scroll(function(){
if($(this).scrollTop() > 1804)
{
$('#voice2').css({"border-bottom":"2px solid #f4f5f8"});
$('#voice3').css({"border-bottom":"2px solid #2e375b"});
}
});这是当前状态：http://tibio.ch谢谢，
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-05-12 01:32:41
试试这个：
var targetOffset = $("#anchor-point").offset().top;
var $w = $(window).scroll(function(){
if ( $w.scrollTop() > targetOffset ) {
$('#voice2').css({"border-bottom":"2px solid #f4f5f8"});
$('#voice3').css({"border-bottom":"2px solid #2e375b"});
} else {
// ...
}
});Stack Overflow用户
发布于 2015-09-03 23:06:36
$(window).bind("scroll", function() {
var $sec1 = $('.bg1').offset().top;
var $sec2 = $('.bg2').offset().top;
var $sec3 = $('.bg3').offset().top;
var $sec4 = $('.bg4').offset().top;
var $sec5 = $('.carousel-indicators').offset().top;
if ($(this).scrollTop() < $sec2){
$(".navbar1").fadeOut();
$(".navbar2").fadeOut();
$(".navbar3").fadeOut();
}
if ($(this).scrollTop() > $sec2 & $(this).scrollTop() < $sec3){
$(".navbar1").fadeIn();
$(".navbar2").fadeOut();
}
if ($(this).scrollTop() > $sec3 & $(this).scrollTop() < $sec4){
$(".navbar2").fadeIn();
$(".navbar3").fadeOut();
}
if ($(this).scrollTop() > $sec4 & $(this).scrollTop() < $sec5){
$(".navbar3").fadeIn();
$(".navbar2").fadeOut();
}
if ($(this).scrollTop() > $sec5){
$(".navbar1").fadeOut();
$(".navbar2").fadeOut();
$(".navbar3").fadeOut();
}
});Stack Overflow用户
发布于 2012-05-12 01:50:18
function scroll_style() {
var window_top = $(window).scrollTop();
var div_top = $('#anchor-point').offset().top;
if (window_top > div_top){
$('#voice2').css({"border-bottom":"2px solid #f4f5f8"});
$('#voice3').css({"border-bottom":"2px solid #2e375b"});
}
}
$(function() {
$(window).scroll(scroll_style);
scroll_style();
});基于：http://blog.yjl.im/2010/01/stick-div-at-top-after-scrolling.html的解决方案
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10555998
复制相关文章
相似问题
腾讯云开发者
