We Keep Coding

Fading text+icon when scrolling down. Appears while again on top

I'm trying to create some sort of info "Scroll Down" button (not clickable) which has to be visible while scroll bar is up on top, fade out when scroll down a few pixels and fade back in when up again.
So far I was able to create the arrow and the message so far as well as the fading part.
Here is a fiddle: https://jsfiddle.net/8b3jL7r0/1/
var btn = $("#button");
$(window).scroll(function() {
if ($(window).scrollTop() < 100) {
btn.addClass("show");
} else {
btn.removeClass("show");
}
});
var btn2 = $("#scrolltxt");
$(window).scroll(function() {
if ($(window).scrollTop() < 100) {
btn2.addClass("showx");
} else {
btn2.removeClass("showx");
}
});
The problem with is that the arrow and the info text 'Scroll Down' does not appear right from the beginning, you have to scroll down a bit so they appear on top and then everything works smooth. Any clue how to make them visible right from the first load of the code?
Any idea how could I transfer all this code into one single code module in WordPress and have it work exactly like in the fiddle ? Because I've tried to insert it but it seems to not work at all, nothing appears on the page, not the arrow nor the info text.

I just added the inital classes to both elements:
https://jsfiddle.net/4e2cafju/
<div id="button" class="show"></div>
<div id="scrolltxt" class="showx">scroll down</div>
for 2:
You should be able to put these elements directly into a template. You should be able to add the css to the style sheet. And you could lnk to an external JS file. That would probably be best practice. You could also put all the code into a single page. I'm not sure how your wordpress install / theme is set up.

how to stop jquery past the header

I'm using js to move my background photo from left to right and to move the header text right to left and down while scrolling. However, I'd like to stop the script once I'm past the header section.
<script type="text/javascript">
$(window).scroll(function(){
$('#header').css("background-position",parseInt($(this).scrollTop()*-0.65));
$('#header').css("padding-bottom",parseInt($(this).scrollTop()*.8));
$('#headtext').css("padding-top",parseInt($(this).scrollTop()*1));
$('#headtext').css("padding-right",parseInt($(this).scrollTop()*.5));
$('#headtext').css("padding-left",parseInt($(this).scrollTop()*-.5));
if (parseInt($(this).scrollTop() > 10000) {
return;
}
})
</script>
I've been trying to add if or while statements to the above but every time I do, the js stops working. I have little knowledge of jquery so I'm not sure if the syntax is incorrect or if I need to approach this differently.
Thank you!

jQuery(document).scroll(function(){
if(jQuery(window).scrollTop()>jQuery('#foobar').position().top){
/* something */
console.log('stopped');
} else {
/* something else */
console.log('resumed');
}
});
Where #foobar equals the element that will be used as a trigger, for the above code snippet, when it reaches the top of the screen.

You can use the offset() function from jQuery to calculate if the header is still in view. Something like this:
if(($('#header').offset().top + $('#header').height()) < $(window).scrollTop()) {
// Do something
}
Keep in mind that this snippet is seriously unoptimized code, so take the necessary steps to make it better.

You are missing a parentheses in your if statement. If you move it to the top of that block and flip your > to a < it will stop running the script once it gets to the 10000 or whatever you set as your header. here is your code updated
$(window).scroll(function(){
if (parseInt($(this).scrollTop()) < 10000) {
$('#header').css("background-position",parseInt($(this).scrollTop()*-0.65));
$('#header').css("padding-bottom",parseInt($(this).scrollTop()*.8));
$('#headtext').css("padding-top",parseInt($(this).scrollTop()*1));
$('#headtext').css("padding-right",parseInt($(this).scrollTop()*.5));
$('#headtext').css("padding-left",parseInt($(this).scrollTop()*-.5));
}
})

jQuery/JS – scroll to next element on click (scrollable div issues)

I have a simple blog, and each blog post has a number of images ranging from 1 to 10. If you click on any of the images in the post, it should scroll you down to the next post. I thought something as simple as this would've worked:
$('.each-journal-entry .slider-container .journal-slider .each-slide img').on('click', function () {
var $this = $(this);
$('.journal-container').animate({
scrollTop: $this.closest('.each-journal-entry').next().offset().top
}, 500);
});
But when I click another image, except for the first one, it just scrolls to an odd position.
I managed to achieve this with some help, and you can see the output here: http://jsfiddle.net/w7rtcmp0/3/ which works great, but the difference for me is that my content is in a scrollable div (hence .journal-container and not html, body.
Any ideas why I am having this issue? I have created a jsFiddle with the scrollable div, and if you click an image further down... it replicates this issue... so hopefully this helps.
http://jsfiddle.net/w7rtcmp0/5/
Thanks.

jQuery adjusts offset().top() based on the current scroll position.
Using JavaScript's offsetTop property should fix the problem:
scrollTop: $this.closest('.each-journal-entry').next()[0].offsetTop
Fiddle: http://jsfiddle.net/m7cm5oL6/

So I think you were trying to use the wrong height.
Here I set a variable of height and set it to the height of the current journal/blog object. This allows me to scroll my height all the way down to the next available blog object.
http://jsfiddle.net/w7rtcmp0/24/
$('.each-journal-entry .slider-container .journal-slider .each-slide img').on('click', function() {
$this = $(this);
var height = $this.closest('.each-journal-entry').height();
$('.scrollable').animate({
scrollTop: height
}, 2000);
});

You may want to look at Ariel Flesler's jQuery scrollTo plugin, I had the same issue and using this saved me hours of debugging.

Trigger JQuery function when passed half way down the page

Is there a way to tell if you have scrolled passed the center of the web page or in other words, when you have scrolled passed exactly half of the web page and your scrollbar is situated in the lower half of the browser window?
I want to be able to trigger this:
$('.pineapple-man').show(); when I have scrolled down passed half of the page?
Is this possible at all?
Your help would be so kind!

You can get the pixel amount of an element has been scrolled by using .scrollTop(). To listen to scroll events use .scroll().
When you want to identify the halfway, use height of the scroll:
$(window).scroll(function () {
if ($(window).scrollTop() > $('body').height() / 2) {
$('.pineapple-man').show();
}
});
If you are scrolling some other element than the whole window/body, please feel free to change the selectors.
To make the showing one-timer, add the removal of scroll event listener, by adding the following after the .show() call:
$(window).unbind('scroll');

I guess you want to do something like this:
if($(document).scrollTop() > $(document).height()/2){
$('.pineapple-man').show();
}
where scrollTop() gets the current horizontal position and height() defines the document height.

See the scroll event and the scrollTop method.

you can use the focus event if you scroll down to it (just like jQuery uses for their comments)
jQuery('selector').focus(function() {
jQuery('.page').show();
});

jQuery div autoscroll

I am looking for advice on how to create an autoscrolling effect using jQuery which would enable an entire div within a page to begin scrolling vertically upon loading at a constant slow speed. This would be a div with a large amount of content of which only a small amount was visible on the screen at any one time.
The scroll needs to be automatic, smooth and at a defined rate for example 10 pixels per second. Additionally when the scroll gets to the bottom of the page I need to be able to call a function.
I have tried a few different jQuery plugins but found nothing yet that worked reliably. Can anybody suggest an approach to take here?
Thanks
Simon

This can easily be done without jquery.
function init() {
var div = document.getElementById("myDiv");
// increase the scroll position by 10 px every 10th of a second
setInterval(function() {
// make sure it's not at the bottom
if (div.scrollTop < div.scrollHeight - div.clientHeight)
div.scrollTop += 10; // move down
}, 100); // 100 milliseconds
}

Try this technique

try this plugin : scrollTo
especially the onAfter