We Keep Coding

jQuery Navbar transition on scroll. How to adjust specific point of transition

In a site I'm building I'm trying to make the navbar change color when I scroll. However, I don't want it to change colors as soon as I start scrolling. I want it at a specified point (once I scroll past my jumbotron).
So far, I've only been able to make it work by scrolling from the top. I'm not quite skilled enough to figure out how to do it past a specific point on my page. I would greatly appreciate some guidance on this.
jQuery script
$(function () {
$(document).scroll(function () {
var $nav = $(".fixed-top");
$nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
});
});
Thanks for any help or guidance!

There are a lot of ways you can do it.
one way could be done with pure javascript.
change changeColorValue that represents the scroll bar value according to your needs.
Here is my suggestion:
LIVE DEMO
JavaScript:
var changeColorValue = 50;
window.addEventListener("scroll", scrollAnim);
function scrollAnim () {
var val = getScrollVal();
if(val > changeColorValue)
{
document.getElementById('mynav').style.backgroundColor = 'red';
}
else
{
document.getElementById('mynav').style.backgroundColor = '#333';
}
}
function getScrollVal()
{
var val = $(document).scrollTop();
return val;
}

making multiple sliders with one set of jQuery code

I've made a slider with jQuery using html tags which have classes instead of IDs so that I will be able to use the same jQuery code for other duplicated sliders.
The problem is, I want the width of my ul to be calculated based on the number of lis, instead of setting it manually in CSS. When there is only one slider I can set my vars outside of the function, but when I have to use it though event attributes on my html parts so that I will be able to use them for multiple sliders, I have to move the vars inside of my function, which sets the wrong width.
This is my code:
function OLAR(direction,span) {
var OurNexNPrv = $(span);
var Parent_OLAR = OurNexNPrv.parents('.OLAR');
var UL_OF_OLAR = Parent_OLAR.find('.OLAR_CONTENT ul');
var LI_OF_OLAR = UL_OF_OLAR.find('li');
var LI_OF_OLAR_LENGTH = LI_OF_OLAR.length;
var Quantity_OF_OLAR_PAGES = LI_OF_OLAR_LENGTH / 3;
var Max_Margin_LEFT = -(Quantity_OF_OLAR_PAGES - 1) * 576;
UL_OF_OLAR.css('width',LI_OF_OLAR_LENGTH*192);
var AffectedLeftMargin;
var CurrentLeftMargin = UL_OF_OLAR.css('margin-left');
CurrentLeftMargin = parseFloat(CurrentLeftMargin);
if (direction == 'right') {
AffectedLeftMargin = CurrentLeftMargin - 576;
}
if (direction == 'left') {
AffectedLeftMargin = CurrentLeftMargin + 576;
}
if (AffectedLeftMargin < Max_Margin_LEFT) {
AffectedLeftMargin = 0;
}
if (AffectedLeftMargin > 0) {
AffectedLeftMargin = Max_Margin_LEFT;
}
UL_OF_OLAR.animate({'marginLeft': AffectedLeftMargin}, 1000);
}
$('.CIRCLE_LOAD_RIGHT').click(function () {
OLAR('right');
});
$('.CIRCLE_LOAD_LEFT').click(function () {
OLAR('left');
});
How can I set the width for each of my uls individually, through css commands outside of that function?

Okay, my ul tag did not have the absolute position; after giving it the right position and left:0 and bottom:0 or right:0 and bottom:0 (based on your language)the given width which comes from JQuery code can rhyme perfectly with everything else. I've tried it with multiple sliders and it works perfectly :)
So, we need an anchor point in order to make this work. And there is nothing wrong with this JQuery code which has been mentioned above!
Have a great day.

JQuery Add Class when bottom of div reaches top

I am trying to add a class when the bottom of a div reaches the top of the window, but am not sure of how to do it.
I have managed to add the class when the top of the div gets to the top of the window, but am not having much luck with the bottom of the div.
Code I am using:
$(document).ready(function() {
var menuLinksTop = $('.container').offset().top;
var menuLinks = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > menuLinksTop) {
$('header').addClass('black-links');
} else {
$('header').removeClass('black-links');
}
};
menuLinks();
$(window).scroll(function() {
menuLinks();
});
Any help is appreciated.

You should use javascript's getBoundingClientRect() method, watch $(window).scroll event, and look at element's rectangle, its bottom value will give you what you need (if it's negative, your element is all the way up)
$(window).scroll(function() {
console.log($("div.watch")[0].getBoundingClientRect());
if ($("div.watch")[0].getBoundingClientRect().bottom < 0)
alert ("i'm out :3");
});
see jsFiddle http://jsfiddle.net/ja5nnbwr/2/

Add the height of the div. Assuming it is the .container :
var menuLinksTop = $('.container').offset().top + $('.container').height();

Show id when div is halfway up

So I know how to actually get ids and classes and do the basics but I'm not sure how to do this:
"When the user scrolls down, the title of the post that takes up half the screen should be shown."
The setup is supposed to look something like this...
Any ideas?

You need to use JS and I used jQuery to do a simple prototype
It's all about listening to the scroll event and dealing with the offset of the elements from top you need to add a simple condition for the heights but now it's just working fine
$(window).scroll(function(){
var scrolledTop = $(this).scrollTop();
console.log(scrolledTop);
$(".blog").each(function(){
if($(this).offset().top < scrolledTop)
{
$('#blogname').html($(this).html());
}
});
});
Check out this http://jsfiddle.net/GkrCU/2/
I hope this can help :)

Here is my answer
$(window).scroll(function () {
var windowheight = $(this).scrollTop();
$(".blog").each(function () {
var sc = $(this).offset().top;
var id = $(this).attr('id');
if (sc < windowheight) {
$("#blogname span").html(id)
}
});
});
http://jsfiddle.net/GkrCU/1/

How to set the scrollTop value for a textarea?

I am facing a problem when I try to set the scrollTop value for a textarea. My JavaScript code is as follows -
var element = document.getElementById("messageTextArea");
console.log("scrollTop = "+element.scrollTop);
console.log("scrollHeight = "+element.scrollHeight);
element.scrollTop = element.scrollHeight; // doesn't work!
console.log("The value is-->"+element.scrollTop); // no change!
element = document.getElementById("messageTextArea");
console.log("Now scrollTop = "+element.scrollTop); // no change!
console.log("Now scrollHeight = "+element.scrollHeight);
The Firefox console log gives the following -
scrollTop = 0
scrollHeight = 86
The value is-->0
Now scrollTop = 0
Now scrollHeight = 86
What I really want to do is to make the textarea somehow automatically be scrolled down to the maximum when the text does not fit in the actual width and height and the scroll bar gets activated.
Here's are two screenshots explaining the problem -
This is what I have currently -
And this is what I would like to have -
Please help!

Ok, sorry guys. The problem was that I was getting the wrong text area. This is so embarrassing! Now it works.
var element = document.getElementById("chatTextArea"); // <-- this is where I was making a mistake in my code. So embarrassing!

Also had issues with using scrollTop in firefox with textarea, especially if textarea value is set with AJAX.
This worked for me:
<script>
function scroll_bottom(elm){
var elm = document.getElementById(elm);
var bottom = function() {
elm.scrollTop = elm.scrollHeight;
};
setTimeout(bottom, 0);
}
</script>
Then to use it, for example:
<textarea id="log" style="width:100%;height:100%;resize:none;"></textarea>
<script>
$(document).ready(function(){
scroll_bottom('log');
});
</script>

I believe that setting the scrollTop in FF does not work when overflow of the element is visible. It works if the overflow is hidden