Change CSS element with JQuery when scroll reaches an anchor point
I currently have this solution to change the css elements when the page reaches a certain point but I'd like to use an #anchor-point instead of the pixel value (1804) to be responsive on smaller screens. I know it must be easy but I can't find how:
$(document).scroll(function(){
if($(this).scrollTop() > 1804)
{
$('#voice2').css({"border-bottom":"2px solid #f4f5f8"});
$('#voice3').css({"border-bottom":"2px solid #2e375b"});
}
});
This is the current state: http://tibio.ch Thank you,
Try this:
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 {
// ...
}
});
$(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();
}
});
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();
});
Solution based on: http://blog.yjl.im/2010/01/stick-div-at-top-after-scrolling.html