Develop Reference

stop/disable vertical scrolling at a certain point but be able to scroll up the page but not down it

I've made a game website that has horizontal and vertical scrolling but I want the website to stop or disable scrolling down the page at the "second arrows" but be able to scroll up the page.
basically I've already tried "overflow-y:hidden" but i still want to beable to scroll back up the page
https://codepen.io/54x1/full/qBBdXGP
check out my codepen to see my design
code for where i want it:
var BotOfWin1 = $(window).scrollTop() + $(window).outerHeight();
var BotOfObj1 = $('.main-rules').position().top + $('.main-rules').outerHeight();
if (BotOfWin1 > BotOfObj1)
{
$('.game-section').css({"display": "block"});
} else {
$('.game-section').css({"display": "none"});
}

I don't know your motivation for disabling scrolling below the second arrows (can the user navigate there other than scolling?). So I'll just go with the assumtion, that you simply want to prevent the user from ever getting there.
Just use display: none in CSS to not display the content.

What I would do is:
Do not display the second page element on pageload
.content-second {
display: none;
}
On scrolling, check if the page has been scrolled to the very right. If so: display second page element.
var win = $(window);
var contentWidth = $('.content-first').width();
win.on('scroll', function () {
var scrolledRight = win.scrollLeft() + win.width() >= contentWidth;
if (scrolledRight) {
$('.content-second').addClass('show');
}
});
See this pen for a simplified example.

Making navbar fixed-top after scrolling past a div

Im trying to make my bootstrap navbar become a fixed top navbar after scrolling down past a specific div.
Not sure what the best way to do this is, but my code is not adding the classes back onto the navbar after scrolling.
Any simpler solutions?
$(document).ready(function(){
// if on homepage
if ( window.location.pathname == '/' ){
$("#nav").removeClass("navbar-fixed-top");
$("#nav").css("position", "absolute");
$(window).scroll(function() {
// get positions of nav and div element
var thediv =$("#home-callout-top").offset();
var thenav = $("#nav").offset();
console.log("the div" + thediv.top + "nav" + thenav.top);
if(thenav.top >= thediv.top){
// If nav top position is greater (below) the div then make the navbar fixed top again
$("#nav").addClass("navbar-fixed-top");
$("#nav").css("position", "relative");
}
});
}
});

Jquery element.click(function(){})

I am trying to set my website's side menus fixed when you scroll the windows more than a specific number. The menus are working fine and they get fixed after scroll. This is OK but the problem is after scroll they should collapse and when you click on them they should extend but this doesn't happen! I mean it works sometimes and sometimes it doesn't! I am using addClass() to add the fixed class to the menus!
$(window).scroll(function() {
if ($(window).scrollTop() > (rightHeight + $('.header-wrapper').height() + $('.top-wrapper').height() + $('.back-picture').height()) + 300) {
$('.login-fixed').fadeIn(100);
$('.col-content').css('margin-right', '15%');
$('.right-side').addClass('fixed');
$('.right-side').children('.side-widget').addClass('side-widget-fixed');
$('.right-side').children('.side-widget').click(function() {
if ($('.right-side').children().hasClass('open')) {
if ($(this).hasClass('open')) {
$(this).toggleClass('open');
} else {
$('.right-side').children().removeClass('open');
$(this).toggleClass('open');
}
} else {
$(this).toggleClass('open');
}
});
} else {
$('.col-content').css('margin-right', 0);
$('.right-side').removeClass('fixed');
$('.right-side').children('.side-widget').removeClass('side-widget-fixed');
$('.login-fixed').fadeOut(100);
}
});
I am also trying to handle the click and it means when another menu is extended when you click on a menu the other one collapses and this one opens! I know that maybe my question is a little confusing but I am confused too.
Just for more info I should say when I edit the code it works but after refreshing 10 times or scrolling 20 times it corrupts!

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' });

change id of button depending on current viewed div

ive a problem which is driving me crazy. im trying to explain...
i have a very long scrolling page with about 10 divs, one below the other (no space between).
at the bottom of the viewing port is a button with an id and a position: fixed. when i scroll up or down the button is fixed while the divs move up or down.
i want to have different id's on the button depending on which div layer is in the viewing port. that means if one divlayer fills over 50% of the available space the href of the button should change...
i tried the inview.js, but the problem is, that 2 divs at the same time have the inview class...
my current code:
$('#div4, #div5, #div6').bind('inview', function (event, visible) {
if (visible == true) {
$(this).addClass("inview");
} else {
$(this).removeClass("inview");
}
});
var $div4 = $('#div4');
if($div4.hasClass("inview")){
$('#button1').attr('id', 'button2');
}
you see, every div which is in the viewport the button gets a new id.
has anyone of you a solution?
thanks ted

You can try to remove the inview class before adding it.. Something like this:
var $divs = $('#div4,#div5,#div6';
$divs.bind('inview', function (event, visible) {
$divs.not(this).removeClass("inview");
if (visible == true) {
$(this).addClass("inview");
}
});
Another suggestion is to use the Waypoints plugin and fire when the div crosses the 50% mark.
The only difficult part is that depending on the direction you'll need to select the current div or the one above.
Plugin: http://imakewebthings.com/jquery-waypoints/
Demo: http://jsfiddle.net/lucuma/nFfSn/1/
Code:
$('.container div').waypoint(function (direction) {
if (direction=='up')
alert('hit ' + $.waypoints('above')[$.waypoints('above').length-2].id);
else
alert('hit ' + $(this).attr('id'));
}, {
offset: $.waypoints('viewportHeight') / 2
});