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.

Animating an element differently to slide in/out of view on scroll up / down

I'm working on a new portfolio for myself, using Bootstrap framework and I want to animate my slider based on the direction that the user is scrolling.
For example I already have an animation to slide the navbar class in. But as the user scrolls down the page I want to hide the navbar this is to give the user more visibility on the screen when browsing content. Then when they attempt to scroll back up the page I want to slide the .navbar class back in again.
Now I can easily get this to work if I target a specific element or pixel height, but that doesn't help me. I know it's achievable as I've seen it on several websites (LinkedIn for example).
So I'm wondering if it's a case of targeting positive or negative values on the y axis or something?

var lastScrollPosition = 0;
window.onscroll = function() {
var newScrollPosition = window.scrollY;
if (newScrollPosition < lastScrollPosition){
//upward - code here
}else{
//downward - code here
}
lastScrollPosition = newScrollPosition;
}

Stick the bar always to footer even while animating

Recently here, I asked a question to stick a bar element always to bottom-left of the container. It seems not possible using just css. So, I ended up using javascript. Here is the Working Fiddle
Giving highlights of the previous question:
Stick the bar element to bottom-left of the container
The bar should be in bottom-left, even the container is scrolled vertically or horizontally.
The bar should come over the horizontal scrollbar, if the horizontal scrollbar is present.
The above fiddle works fine and obeys all above cases, even when the window is resized.
Now, I have the same situation but the container will get resized because of animation button click but not window resize.
Since, I am animating for one second, I am calling the same code present in the window resize function while I clicked on the animating button. But doing so is somehow breaking and isn't following the above rules/requirements.
Here is the Fiddle. (not working)
Please help.
PS: Here is the link to previous question. (if someone wants brief understanding)

Again, I solved it. I was making things complicated. Where there was need of only bottom property, I was using top and resetting it. Lots of unneccessary action in the code.
Here is the code, which is working fine.
$(function () {
$('.content').width($('body').width() - 50);
});
var stickToBottom = function (parent) {
var bar = parent.querySelector('.bar');
var top = bar.offsetTop;
parent.addEventListener('scroll', function (e) {
var el = e.currentTarget;
bar.style.bottom = -el.scrollTop + "px";
bar.style.left = el.scrollLeft + "px";
});
}
var parent = document.querySelector('.parent');
stickToBottom(parent);
$('.clickme').click(function () {
$(this).toggleClass('active');
});
Thanks to rlemon for giving a idea in javascript chat room.
Working Fiddle

how to reset scroll position in a div using javascript

I am working on a mobile hybrid application.
In my html page, I have 3 tabs. When clicking a tab, the content of the scrollable div gets changed. My problem is when I scroll down the content of div (view) and click another tab, the content disappears (but the content is there). Please help me so I can reset the div scroll position when clicking any tab.
Please give me suggestions only with JavaScript or CSS, not with JQuery as I am not using the JQuery library.

Without seeing code, i can just guess.
If you want to reset the scroll position you can simply use
window.scrollTo(0,0);
add this code to your each tab click functions so that when ever you click any tab, it resets to top.
If you have any specific div that has overflow property
var myDiv = document.getElementById('specificDiv');
myDiv.scrollTop = 0;

It is easy
<div id="test" style="height:150px; width:600px;overflow-y:auto;background-color:gray;">
<div style="width:150px;height:500px; background-color:green;"></div>
</div>
document.getElementById('test').scrollTop =0;

Finally this worked for me
function resetScrollPos(selector) {
var divs = document.querySelectorAll(selector);
for (var p = 0; p < divs.length; p++) {
if (Boolean(divs[p].style.transform)) { //for IE(10) and firefox
divs[p].style.transform = 'translate3d(0px, 0px, 0px)';
} else { //for chrome and safari
divs[p].style['-webkit-transform'] = 'translate3d(0px, 0px, 0px)';
}
}
}
resetScrollPos('.mblScrollableViewContainer');
Calling this function after transition between view ,will reset my scroll position.

i used this on my inverted comments section and it worked.
instead of id i had class.
i needed for scrollbar to be at the bottom each time user adds comment.
so i put this on submit button.
const myDiv = document.getElementsByClassName('comments-container');
myDiv[0].scrollTop = 0;

Highlighting the element after scrolling to it

Here is the fiddle I'm working with: http://jsfiddle.net/fz5Yk/5/
As you can see, it has a one-page scrolling navigation. I want to achieve a highlighting effect (preferably using .animate function) to the headings in <strong> </strong> tags when scrolling to a section. Just scroll the page manually and you will see a highlighting in the navigation menu; item of the scrolled section, but I can't quite resolve the js codes in order to apply the same to the headings, and an intervention in it with .animate function seems much more difficult to me. Can you help me?

The plugin-page seems well-documented; https://github.com/davist11/jQuery-One-Page-Nav.
Just put an animation on the location you scroll to inside the end: definition;
$('#nav').onePageNav({
end: function() {
//I get fired when the animation is ending
}
});
Test update
$(window).scroll(function() {
var visible_start = window.pageYOffset;
var window_height = window.innerHeight;
var section3_height = $('#section-3').height();
var section3_start = $('#section-3')[0].offsetTop;
if ((visible_start - window_height >= section3_start) &&
$('#section-3').css('background-color', 'yellow');
}
});