我目前有一个解决方案,可以在页面到达某个点时更改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谢谢,
发布于 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 {
// ...
}
});
发布于 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();
}
});
发布于 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的解决方案
https://stackoverflow.com/questions/10555998
复制相似问题