We Keep Coding

Adding and removing class at div top?

I am trying to make a class fade in when 'register' class div top enters the window and otherwise have the class fade out
How can I make this work?
$(window).scroll(function() {
var tint = $('.register').offset().top;
if ($(this).scrollTop() > tint) {
$('.tint').fadeIn(1000);
} else {
$('.tint').fadeOut(1000);
}
});
section {
height: 100vh;
width: 100%;
}
.tint {
background-color: #000;
width: 100%;
height: 100vh;
opacity: 0.6;
position: absolute;
top: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section></section>
<section class="register">
<div class="tint"></div>
<div>Content</div>
</section>

Class example code you posted seems to work correctly, I think you should check css also if there is any problem. But if want any other methods then here are some methods: you can use fadIn() - fadeOut(), or hide() - show() or css visibility or display block and none , or simply can jquery UI animate functionality. Here is animation example to hide div jquery animate
$(window).scroll(function() {
var top_of_element = $("#element").offset().top;
var bottom_of_element = $("#element").offset().top + $("#element").outerHeight();
var bottom_of_screen = $(window).scrollTop() + $(window).innerHeight();
var top_of_screen = $(window).scrollTop();
if ((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
// the element is visible, do something
} else {
// the element is not visible, do something else
}
});
$(window).scroll(function() {
var tint = $('.register').offset().top;
if ($(this).scrollTop() > tint) {
$('.register').fadeIn();
// OR
//$(".register").show();
// OR
//$(".register").css('visibility', 'visible');
} else {
$('.register').fadeOut();
// OR
//$(".register").hide();
// OR
//$(".register").css('visibility', 'hidden');
}
});
.tint {
background-color: #000;
width: 100%;
height: 100vh;
opacity: 0.6;
position: absolute;
top: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="register">
<div class="tint"></div>
<div>Content</div>
</section>

The only problem, that you've passed a string to fadeOut, which expects a number.
So, remove the quotes around '1000', and you'll be right:
$(window).scroll(function() {
var tint = $('.register').offset().top;
if ($(this).scrollTop() > tint) {
$('.tint').fadeIn(1000);
} else {
$('.tint').fadeOut(1000);
}
});
section {
height: 100vh;
width: 100%;
}
.tint {
background-color: #000;
width: 100%;
height: 100vh;
opacity: 0.6;
position: absolute;
top: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section></section>
<section class="register">
<div class="tint"></div>
<div>Content</div>
</section>

How to prevent rubberband scrolling on iOS

I have a fixed header that is not visible on scroll down but is visible on scroll up, the problem is that when I reach the top of the page on iPhone, the header disappears (probably because the screen thinks I'm scrolling down even though I'm not)
I've tried this solution: Disable Chrome's pull-to-refresh on iPhone And it doesn't work when I run the function on element body, or element html, on ready. The site just loads and loads with a spinner if I do that. Should I run the function somewhere else or on a different element? It feels like it has to be run at ready? And on body or html since those are the elements I want to prevent from rubberbanding. Also see my code for the scrolling function and some CSS, is there anything I can do with that to help the header not from disappearing at the top?
menuOnScroll: function () {
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
$(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
var subMenus = $('.extended-navigation.show').attr('id');
// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
if (st > lastScrollTop){
// Scroll Down
$('#topbar').removeClass('nav-up').addClass('scroll-top-bar');
$('.main-menu-container, #search-extended, .index-info-mobile').addClass('sticky nav-hide').removeClass('nav-show');
if ((window).matchMedia("(min-width: 767.98px)").matches) {
$('.hamburgermenu-button').addClass('collapsed');
$('.main-navigation').addClass('d-xs-none');
$('.main-menu a[href="#'+subMenus+'"]').click();
}
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$('#topbar').removeClass('scroll-top-bar').addClass('nav-up');
$('.main-menu-container, #search-extended, .index-info-mobile').removeClass('nav-hide').addClass('nav-show');
if ((window).matchMedia("(min-width: 767.98px)").matches) {
$('.main-navigation').addClass('d-xs-none');
$('.hamburgermenu-button').addClass('collapsed');
$('.main-menu a[href="#'+subMenus+'"]').click();
}
}
}
if($(window).scrollTop() < delta){
$('.main-menu-container, .index-info-mobile').removeClass('sticky');
}if($(window).scrollTop() > delta) {
$('.main-menu a[href="#'+subMenus+'"]').click();
}
lastScrollTop = st;
}
}
some CSS:
.sticky {
z-index: 9998;
position: fixed;
top: 0;
width: 100%;
transition: top 0.3s;
margin-top:0px;
&.nav-hide {
top: 0px;
transition: top 0.3s;
}
&.nav-show {
top: 70px;
transition: top 0.3s;
}
}
#topbar {
height: 70px;
width: 100%;
background-color: $dark-blue;
position: fixed;
top: 0;
transition: top 0.3s;
z-index: 9999;
align-items: center;
&.scroll-top-bar {
top: -70px;
}
}

Show div after scroll and hide div at the end of the page

I try to show a div after scrolling down 1500px and i want to hide the div when 90% of the page is scrolled (so, nearly at the end of the page).
My Code works fine to show it up after 1500px but i don't know how to hide it when the end of the page is reached.
This is my code:
<style type="text/css">
#sample {
background: #fff none repeat scroll 0 0;
position: fixed;
bottom: 0;
height: auto;
max-height:100px;
width: 100%;
z-index: 999;
display:none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 1500) {
$('#sample').fadeIn();
} else {
$('#sample').fadeOut();
}
});
</script>
<div id="sample">
just some content...
</div>
I would be very glad if someone can help me with the problem. Many Thanks.

You could do something like this:
var y = $(this).scrollTop();
if (y > 1500 && y < ($(document).height() * 0.9)) {
$('#sample').fadeIn();
} else {
$('#sample').fadeOut();
}

You can calculate the "90%"-scroll with $(window).height() and $(document).height(). See the example:
$(function() {
$(document).scroll(function() {
var y = $(this).scrollTop();
if ((y + $(window).height()) > ($(document).height() * 0.9)) {
$('#sample').fadeOut();
return;
}
if (y > 1500) {
$('#sample').fadeIn();
} else {
$('#sample').fadeOut();
}
});
})
.content {
height: 3000px;
}
#sample {
background: #ff0000;
position: fixed;
bottom: 0;
height: auto;
max-height: 100px;
width: 100%;
z-index: 999;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
Content
</div>
<div id="sample">
sample
</div>

changing menu background-color when at top of screen

I have a menu which animates into view (from the top) when user scrolls up. And animates up (off screen) when user scrolls down. However, I want the background of the navigation to be black when user is at the top of the page, and white after they are a certain distance from the top.
html-snippet (working code)
...
function hasScrolled() {
if($( window ).width() > 768) {
var st = $(this).scrollTop();
if (Math.abs(lastScrollTop - st) <= delta)
return;
if (st > lastScrollTop && st > navbarHeight ) {
// Scroll Down
$('#s-nav').removeClass('nav-down').addClass('nav-up');
} else {
// Scroll Up
if (st + $(window).height() < $(document).height()) {
$('#s-nav').removeClass('nav-up').addClass('nav-down');
}
}
} else {
$('#s-nav').removeClass('nav-up').addClass('nav-down');
}
html
<nav id="s-nav" class="row nav-down">
... nav menu ...
</nav>
css
#s-nav {
position: fixed;
z-index: 999;
background-color: #fff;
top: 0; left: 0;
width: 100%;
transition: top 0.5s ease;
}
#s-nav.nav-up { top: -75px; }

Something like this.
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 200) {
$("#s-nav").addClass('white_bg');
} else $("#s-nav").removeClass('white_bg');
});
body {
background: #f1f1f1;
height: 1000px;
}
.nav-down {
height: 30px;
width: 100%;
border: 1px solid #ddd;
position: fixed;
background: #000;
color: #ff0;
}
.white_bg{
background: #000;
color:#fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav id="s-nav" class="row nav-down">
... nav menu ...
</nav>

How to set a div as background?

I've found something interesting on this link. But I can't figure out how to make it and I want to know if anyone has any idea how. So what I realised on this is that even if you resize de browser window the elements keep floating but somehow the only focused element here is the webpage not the floating divs from left and right. This is what I've tried https://jsfiddle.net/eoopvgmc/9/ but the only thing that is working is those floating elements.
Here is what I want to know how to do it http://demo.inskinmedia.com/cds/show.php?live=uxtxbpwvx&ismState=1
(function($) {
var element = $('.left-zone'),
originalY = element.offset().top;
var topMargin = 0;
element.css('position', 'relative');
$(window).on('scroll', function(event) {
var scrollTop = $(window).scrollTop();
element.stop(false, false).animate({
top: scrollTop < originalY ? 0 : scrollTop - originalY + topMargin
});
});
})(jQuery);
(function($) {
var element = $('.right-zone'),
originalY = element.offset().top;
var topMargin = 0;
element.css('position', 'relative');
$(window).on('scroll', function(event) {
var scrollTop = $(window).scrollTop();
element.stop(false, false).animate({
top: scrollTop < -250 ? -250 : scrollTop - originalY + topMargin
});
});
})(jQuery);

Just add a div with a fixed width to wrap them
Edit: Changed the code to fit the request ->
$(document).ready(function() {
$(document).on('scroll', function() {
$('.ads').css({
'top': $(window).scrollTop() + 'px'
});
})
});
body {
margin: 0;
}
.wrapper {
position: relative;
width: 500px;
margin: 0 auto;
}
.main_content {
background: blue;
float: left;
height: 1500px;
width: 500px;
}
.top_banner {
background: orange;
float: left;
height: 250px;
width: 500px;
}
.left-zone,
.right-zone {
position: absolute;
top: 0;
width: 224px;
height: 284px;
transition: top 0.8s;
}
.left-zone {
background: yellow;
left: -224px;
}
.right-zone {
background: red;
right: -224px;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="left-zone ads"></div>
<div class="top_banner"></div>
<div class="main_content"></div>
<div class="right-zone ads"></div>
</div>