Develop Reference

Remove class when scroll position is above first anchor link

I need some advice: I have a second navigation on my website that gets sticky as soon as it reaches the bottom of my top navigation. The second navigation contains different anchor links. When clicking on one anchor link the page scrolls to this appropriate section and marks the link with a different color and underline-style. Something like this:
+-------------------------------
| Navigation
+-------------------------------
| Second Navigation
+-------------------------------
Some content (different height)
+-------------------------------
| Anchor link 1
+-------------------------------
Some content (different height)
+-------------------------------
| Anchor link 2
+-------------------------------
...
This is the script I use to highlight (or to add a class for styling) the active links in this second navigation:
jQuery(function ($) {
$(window).scroll(function () {
var scrollPos = $(window).scrollTop();
$('.secondary-nav-section').each(function (i) {
var topPos = $(this).offset().top;
if ((topPos - scrollPos) <= 182) {
$('.secondary-nav-menu-item-active').removeClass('secondary-nav-menu-item-active')
$('.secondary-nav-menu ul li').eq(i).addClass('secondary-nav-menu-item-active')
}
})
});
});
Now to the problem: This code works fine as long as I scroll down and then up and down between the different divs with anchor links.
But as soon as I scroll further up as the first div with an anchor link my script does not remove the class secondary-nav-menu-item-active for the first menu link.
What code should I add to my script so the first menu item is only highlighted if the scroll position is "inside" the first anchor link section?
Thanks for any advice.

In the meantime, I found a working solution. Maybe it helps someone else as well:
jQuery(function ($) {
$(window).scroll(function () {
var scrollPos = $(window).scrollTop();
$('.secondary-nav-menu-item-active').removeClass('secondary-nav-menu-item-active');
$('.secondary-nav-section').each(function (i) {
var topPos = $(this).offset().top;
if ((topPos - scrollPos) <= 182) {
$('.secondary-nav-menu-item-active').removeClass('secondary-nav-menu-item-active');
$('.secondary-nav-menu ul li').eq(i).addClass('secondary-nav-menu-item-active');
}
})
});
});
So, what was missing is this line of code:
$('.secondary-nav-menu-item-active').removeClass('secondary-nav-menu-item-active');
before adding the class to highlight the active second menu entry.

stick div to screen if bottom of div and screen matches

Hello all I am working on a project where in a page I have to stick the div to screen (disable scrolling) when its bottom is at the bottom of screen. I have two divs in the page and both the divs are of variable height. I want to stick the div2 and scroll the div1.
<script>
var divheight
var scrolltop
var screenheight
if(divheight-scrolltop <= screenheight){
/* now stick the div wherever it is i can not
use fixed position as both the divs are floating and
fixing the position will make it to change the position*/ }
else { /*un stick the div*/ }
</script>
i dont know what to put in if and else please help me

Make a function which fire on scroll. The main aim of the function would be to see the difference between screen height and bottom of the div. Once the difference is less than or equal to zero modify the css position to fixed. This will help you
(function ($) {
$('.DIV1').scroll(function () {
var $this = $(this),
win_ht = $(window).height(),
div_ht = $this.height(),
div_bot = $this.offset().top + div_ht;
if (win_ht - div_bot <= 0) {
$this.css({
'position': 'fixed',
'bottom': '0'
})
}
});
})(jQuery);

div horizontal scrolled to left from center

I am trying to apply animation jquery effect to div having list of category which is at center of page.when i am clicking on 1st category then that initial div should move to left from center and new div should appear from right to left.when clicked on 2nd category 1st div having content should move to right and 2nd content div should appear.
effect mostly same like http://livedemo00.template-help.com/wt_47602/index.html
I am able to use viewport to implement div moving from right to left but 1st transition of div having category list from center to left is not achieved.
Thank u
JS
var navClick = function() {
$viewport = $('#viewport');
$targetElem = $('#content' + $(this).data('target'));
$active = $viewport.find('.active');
$active.animate({'right': '-' + $active.width() + 'px'}, function() {
$(this).removeClass('active');
});
$targetElem.animate({'right': '100px'}, function() {
$(this).addClass('active');
});
};
$(function() {
$('nav span').on('click', navClick);
});
JSFiddle

Making nav bar effects using scroll AND click in jQuery

I want a nav to highlight (or something similar) once a user clicks on it AND when a user scrolls to the corresponding section.
However, on my computer when one clicks on any of the nav events after3, only nav event 3 changes. I'm guessing this is because after one clicks on 4 or 5, the scroll bar is already at the bottom of the page, so 4 and 5 never reach the top. The only div at the top is post 3, so my code highlights nav event 3 and ignores the click.
Is there any way I can fix this? Ive tried if statements (only highlight nav event if it's at the top AND the scrollbar isn't at the bottom or the top isn't the last item).
Here is a more accurate fiddle, using a fix below showing what I am talking about. The fix now highlights on scroll, but if you click option 5, it will not highlight.
$('.option').children('a').click(function() {
$('.option').css('background-color', '#CCCCCC;');
$(this).css('background-color', 'red');
var postId = $($(this).attr('href'));
var postLocation = postId.offset().top;
$(window).scrollTop(postLocation);
});
$(window).scroll(function() {
var scrollBar = $(this).scrollTop();
var allPosts = [];
var post = $('.content').offset();
var lastPost = allPosts.legnth-1
var windowHeight = $(window).height();
var bottomScroll = windowHeight-scrollBar;
$(".content").each(function(){
allPosts.push($(this).attr('id'));
});
i = 0;
for(i in allPosts){
var currentPost = "#"+allPosts[i];
var postPosition = $(currentPost).offset().top;
if (scrollBar >= postPosition){
$('.option').css('background-color', '#CCCCCC');
$('#nav'+allPosts[i]).css('background-color', 'red');
};
};
});

I think you've overdone your scroll() handler, to keep it simple you just needs to check if the scrollbar/scrollTop reaches the '.contents' offset top value but should not be greater than its offset().top plus its height().
$(window).scroll(function () {
var scrollBar = $(this).scrollTop();
$(".content").each(function (index) {
var elTop = $(this).offset().top;
var elHeight = $(this).height();
if (scrollBar >= elTop - 5 && scrollBar < elTop + elHeight) {
/* $(this) '.content' is the active on the vewport,
get its index to target the corresponding navigation '.option',
like this - $('.Nav li').eq(index)
*/
}
});
});
And you actually don't need to set $(window).scrollTop(postLocation); because of the default <a> tag anchoring on click, you can omit that one and it will work fine. However if you are looking to animate you need first to prevent this default behavior:
$('.option').children('a').click(function (e) {
e.preventDefault();
var postId = $($(this).attr('href'));
var postLocation = postId.offset().top;
$('html, body').animate({scrollTop:postLocation},'slow');
});
See the demo.

What you are trying to implement from scratch, although commendable, has already been done by the nice folks at Bootstrap. It is called a Scrollspy and all you need to do to implement it is include Bootstrap js and css (you also need jquery but you already have that) and make some minor changes to your html.
Scrollspy implementation steps.
And here is a demonstration. Notice only one line of js. :D
$('body').scrollspy({ target: '.navbar-example' });

jQuery: scroll left / right to next div

I have a parent .slider-wrap div at 100% width, with 3 .slider-slide-wrap child divs inside, each at 680px width. You can scroll horizontally inside the .slider-wrap div.
I've also created 2 .slider-nav divs, #slider-left sitting on the left, and #slider-right sitting on the right, the idea being, you can scroll as you wish using the scrollbar, but if you clicked the #slider-right div at any time, it would slide you across to the next instance of .slider-slide-wrap divs. Thus, the 2 .slider-nav divs will take you left and right to the next / previous instance of .slider-slide-wrap div.
jsFiddle demo: http://jsfiddle.net/neal_fletcher/rAb3V/
HTML:
<div class="slider-wrap">
<div class="slide-wrap">
<div class="slider-slide-wrap"></div>
<div class="slider-slide-wrap"></div>
<div class="slider-slide-wrap"></div>
</div>
</div>
<div id="slider-left" class="slider-nav"></div>
<div id="slider-right" class="slider-nav"></div>
jQuery:
$(document).ready(function () {
var n = $(".slider-slide-wrap").length,
width = 680,
newwidth = width * n;
$('.slide-wrap').css({
'width': newwidth
});
});
$(document).ready(function () {
$(".slider-slide-wrap").each(function (i) {
var thiswid = 680;
$(this).css({
'left': thiswid * i
});
});
});
If this is at all possible? Any suggestions would be greatly appreciated!

First of I think you need to have an indicator to identify which slide the user has scrolled to, or which slide is currently on the viewport in order for this scroll left & right to work properly.
/*on scroll move the indicator 'shown' class to the
most visible slide on viewport
*/
$('.slider-wrap').scroll(function () {
var scrollLeft = $(this).scrollLeft();
$(".slider-slide-wrap").each(function (i) {
var posLeft = $(this).position().left
var w = $(this).width();
if (scrollLeft >= posLeft && scrollLeft < posLeft + w) {
$(this).addClass('shown').siblings().removeClass('shown');
}
});
});
/* on left button click scroll to
the previous sibling of the current visible slide */
$('#slider-left').click(function () {
var $prev = $('.slide-wrap .shown').prev();
if ($prev.length) {
$('.slider-wrap').animate({
scrollLeft: $prev.position().left
}, 'slow');
}
});
/* on right button click scroll to
the next sibling of the current visible slide */
$('#slider-right').click(function () {
var $next = $('.slide-wrap .shown').next();
if ($next.length) {
$('.slider-wrap').animate({
scrollLeft: $next.position().left
}, 'slow');
}
});
See it working of this jsfiddle.
PS. You also don't need a lot of $(document).ready(), one will do just fine and a best practice to do.