Develop Reference

The page is shaking when scrolling down if use document.documentElement.scrollTop

First of all, I can only use vanilla javascript for the current project.
Run my codes below, there are 3 sections, I want to fix the second black section when it reached the top of the screen, but now the issue is if you use mouse wheel or touchpad scroll down the page, you will see the page is shaking.
I tried many ideas but can't fix this issue, hope anyone can give a solution or correct direction. Thanks!
window.addEventListener('wheel', function(e) {
var nextSection = document.querySelector('#next-section');
var fixedSection = document.querySelector('#fixed-section');
var doc = document.documentElement;
//When scroll down
if (doc.scrollTop >= nextSection.offsetTop - window.innerHeight) {
doc.scrollTop = nextSection.offsetTop - window.innerHeight;
}
});
.section {
width: 100%;
height: 400px;
line-height: 400px;
background: #ccc;
text-align: center;
padding-top: 20px;
}
#fixed-section {
background: #000;
color: #fff;
}
<div id="previous-section" class="section">Just scroll down</div>
<div id="fixed-section" class="section">Fix this section when it reached the top of the viewport.</div>
<div id="next-section" class="section"></div>

Hiding scrollbar and making custom scrollbar

So I wanted to make a page like https://www.guillaumetomasi.com/ .How can I hide the scrollbar and make a custom one like that in the page.

With CSS attributes like overflow-x: hidden and overflow-y: hidden you can hide scrollbars.
The custom scrollbar and the scrolling proccess is controlled by Javascript via and events.

The thing is simple and that's, they are not using any scrolling at all, but what you feel is a modified scroll for those slides is actually a slideshow built by JavaScript functionalities. These side slideshow are nowadays in trend and gives you a feel of pseudo scroll. It will be better if you would ask how to achieve that slideshow in a web page instead of that scrolling...

The scroll bar can be hidden with css ::-webkit-scrollbar {width: 0px;}
The custom scroll bar is made with javascript. Here's an example of how it could be done:
window.addEventListener("scroll", function() {
var section1 = document.getElementById("section1");
var section2 = document.getElementById("section2");
var section3 = document.getElementById("section3");
var indicator = document.getElementById("scroll-indicator");
if (window.scrollY < section2.offsetTop ) { // If scroll height is above section 2
indicator.innerText = "1"
}
if (window.scrollY > (section1.offsetTop + section1.offsetHeight)) { // If scrolled past section 1
indicator.innerText = "2"
}
if (window.scrollY > (section2.offsetTop + section2.offsetHeight)) {// If scrolled past section 2
indicator.innerText = "3"
}
});
p {
position: fixed;
right: 15%;
top: 50%;
color: black;
font-size: 24px;
font-family: arial;
}
::-webkit-scrollbar {
width: 0px; /*This removes the scroll bar*/
}
<div id="section1" style="height: 500px; background-color: lightblue">Scroll Down</div>
<div id="section2" style="height: 500px; background-color: pink">Keep scrolling</div>
<div id="section3" style="height: 500px; background-color: Khaki">Almost there</div>
<p id="scroll-indicator">1</p>

Sidebar Height Issue with Scrolling

enter image description hereI am having issues while implementing Sidebar with mouse scrolling. If i drag the scroll manually with mouse, the sidebar leaves some white space and not able to map with the page height.
$(window).on('scroll resize', function() {
var marginTop = $(window).scrollTop();
var marginFooter = $('#divFooter').height();
var limit = $("#divMain").height() - $("#navMenu").height();
if (marginTop < limit) {
$("#navMenu").css("margin-top", marginTop);
}
});
#navMenu {
padding-left: 0;
padding-right: 0;
float: left;
height: 100%;
z-index: 10001;
}
#divMain {
padding: 0 20px;
overflow: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navMenu">
<ucl:ucNavMenu ID="ucNavMenu" runat="server" />
</div>
<div class="clearfix visible-xs-block"></div>
//div for entire page content inculding page header menu
<div id="divMain"> content </div>

Making text scroll at different speed in a simple jquery parallax example

I am following this parallax tutorial that uses only jQuery. I slightly modified the HTML:
<section id="home" data-type="background" data-speed="10">
<article data-speed="1">One</article>
<article data-speed="20">Two</article>
</section>
<section id="about" data-type="background" data-speed="10">
</section>
css
#home {
background: url(home-bg.jpg) 50% 0 repeat fixed; min-height: 1000px;
height: 1000px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
}
#home article {
height: 458px;
position: absolute;
text-align: center;
top: 150px;
width: 100%;
}
#about {
background: url(about-bg.jpg) 50% 0 repeat fixed; min-height: 1000px;
height: 1000px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
-webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8);
box-shadow: 0 0 50px rgba(0,0,0,0.8);
}
#about article {
height: 458px;
position: absolute;
text-align: center;
top: 150px;
width: 100%;
}
And the jQuery:
$(document).ready(function(){
// Cache the Window object
$window = $(window);
$('section[data-type="background"]').each(function(){
var $bgobj = $(this); // assigning the object
$(window).scroll(function() {
// Scroll the background at var speed
// the yPos is a negative value because we're scrolling it UP!
var yPos = -($window.scrollTop() / $bgobj.data('speed'));
// Put together our final background position
var coords = '50% '+ yPos + 'px';
// Move the background
$bgobj.css({ backgroundPosition: coords });
}); // window scroll Ends
});
});
This code moves everything in a section at the same speed, but I would like to have the <article> text move at a variable speed different (defined in the <article data-speed>) from the background image.
I wasn't sure how to move the text because background-position is for images, and I tried adjusting top but that didn't have any effect. I also tried setting transform: translateZ(); on the article css, but this also did not work.
How can I add different speeds to the <article> texts? I'd also like to stick to jQuery in the spirit of the example.

try modifying markup always wrapping the article with a section, for ex.:
<section id="about" data-speed="4" data-type="background">
<article>One</article>
</section>
<section id="home" data-speed="20" data-type="background" >
<article >Two</article>
</section>
edit--explanation
this is the source of your parallax jquery script:
$(document).ready(function(){
// Cache the Window object
$window = $(window);
$('section[data-type="background"]').each(function(){
var $bgobj = $(this); // assigning the object
$(window).scroll(function() {
// Scroll the background at var speed
// the yPos is a negative value because we're scrolling it UP!
var yPos = -($window.scrollTop() / $bgobj.data('speed'));
// Put together our final background position
var coords = '50% '+ yPos + 'px';
// Move the background
$bgobj.css({ backgroundPosition: coords });
}); // window scroll Ends
});
});
as you can tell what it's doing is slowing down the scroll of the section[data-type="background"] with a factor of data('speed');
This kind of script is built in a way to have one layer of parallax, if you want more parallax layers check wagersfield's parallax script

Fixed secondary Nav bar after scrolling

I was looking through some of the posts and I found most my answer however it's still not working properly for me.
http://jsfiddle.net/5n5MA/619/
The bar you see on the jsfiddle should be catching lower than the top because there is a fixed header that will be there on my main site this secondary bar is supposed to go below it. I can get it to be fixed on jsfiddle but not on my site. And as you can see it is shrinking when it changes to fixed.
HTML:
<header>
<img class="logo" src="images/headerLogo.png">
<p class="about lighter">ABOUT US</p>
<p class="contact lighter">CONTACT US</p>
<img class="getStarted" src="images/getStarted.png">
</header>
<div class="mainSection1">
<h1>SAVE TIME & MONEY</h1>
<h2 class="lighter">CONCIERGE HAS ALL THE ANSWERS</h2>
<p>$79.99 VALUE<br>FREE FOR YOUR CLIENTS</p>
<img class="getStarted" src="images/getStarted.png">
</div>
<div class="subBar">
<p class="first">VALUE</p> <p class="second">SERVICES</p> <p class="third">BRANDS</p> <p class="fourth">HOW IT WORKS</p>
</div>
JS:
var nav = $('.subBar');
if (nav.length) {
var fixmeTop = nav.offset().top -100;
$(window).scroll(function () {
var currentScroll = $(window).scrollTop();
if (currentScroll >= fixmeTop) {
$('.subBar').css({
position: 'fixed',
width: '100%',
top: '73px',
left: '0'
});
$('header').css(
'box-shadow', 'inherit'
);
} else {
$('.subBar').css({
position: 'static'
});
$('header').css(
'box-shadow', '0px 5px 9px #515151'
);
}
});
}
css:
.subBar {
background: #F1F1F2;
height: 65px;
}
.subBar p:first-child {
margin-left: 15%;
border-left: 1px solid #bbbdc0;
}
.subBar p {
float: left;
border-right: 1px solid #bbbdc0;
width: 17%;
text-align: center;
height: 44px;
margin-top: 0px;
padding-top: 21px;
font-weight: lighter;
}

This is because the div .subBar is not given any width.
Because of this it's width get shrinked when it's position becomes fixed, taking it to be auto by default.
So specify a fixed width. It will take that width in any position.
Also, you need to have some margin on left and right so that it stays the same as you want.
You can make the following changes:
.subBar {
background: #F1F1F2;
height: 65px;
width:100%;
}
Another more accurate solution:
Change in the jquery
if (currentScroll >= fixmeTop) {
$('.subBar').css({
position: 'fixed',
top: '72px'
});
} else {
$('.subBar').css({
position: 'static',
width:'auto';
});
}
Check the FIDDLE.

Issue has been solved! I decided to make a second navbar that starts hidden than is shown when I scroll down enough. It seems to be way less jumpy and isn't taking the original bar out of the dom (which messes with other elements below it).