Scroll to div then fix it to top of page - javascript

I currently have a div (#sticky) within the right bar of my page and would like to fix it to the top of the page once I scroll to it. The div (#sticky) I want fixed to the top of the page sits about 1000px down the page.
HTML:
<div id="right-bar">
<div id="sticky-anchor"></div>
<div id="sticky"></div>
</div>
CSS:
#right-bar {
display: inline-block;
float: left;
width: 336px;
height: 10000px;
margin-left: 15px;
}
#sticky {
display: block;
width: 334px;
height: 600px;
background-color: white;
border: 1px solid #e5e5e5;
margin-top: 15px;
}
#sticky .stick {
position: fixed;
top: 0;
z-index: 10000;
}
JAVASCRIPT: (within head tags)
<script>
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top) {
$('#sticky').addClass('stick');
} else {
$('#sticky').removeClass('stick');
}
}
$(function () {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
</script>
Not quite sure what I am doing wrong, but once I scroll to the div, I bypass it without it getting stuck to the top of the page.
Any and all help is appreciated!

You have a CSS typo, instead of #sticky .stick use #sticky.stick (same thing but without a space).

Related

Making div fade in and out when scrolling

I have a div that is set to:
{
height: 100vh;
width: 100%;
background-color: black;
opacity: 0;
position: absolute;
z-index: 2;
}
This div is also at the top of the page.
I want to make it so that as I scroll down (and away from the div), it slowly fades in, and when I scroll back up it fades out.
How would I do this?
You may refer following code snippet. The point I am trying to make is in the script tag at the bottom just added the window scroll function which sets the opacity to your entire window of desired height in your css class ".top". So when you try to scroll in and out it will dynamically add an animation effect to your window.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<style>
body {
margin: 0;
height: 1000px;
}
.top {
margin: 0;
position: relative;
width: 100%;
background-color: #aaa;
height: 300px;
opacity: 1;
text-align: center;
font-family: 'helvetica';
font-size: 80px;
font-weight: 100;
color: #fff;
}
.title {
position: absolute;
top: 60%;
left: 100px;
}
</style>
</head>
<body>
<div class="top">
<div class="title">Fade Away</div>
</div>
</body>
</html>
<script>
$(window).scroll(function() {
$(".top").css("opacity", 1 - $(window).scrollTop() / 250);
});
</script>
document.body.addEventListener('wheel', (e) => {
let faceLayer = document.getElementById('your_id');
faceLayer.style.opacity = Math.abs(faceLayer.getBoundingClientRect().top / faceLayer.clientHeight).
})

how to change css when user scrolls to bottom of page

i currently have a div that appears fixed after scrolling. i want that div to to remain visible but not fixed once the user reaches the bottom of the page..
this is what i have so far:
var topOfOthDiv = 800; //set manually for example
$(window).scroll(function() {
if ($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div?
$("#ctawrapper.ctaFloat").addClass('show'); //reached the desired point -- show div
} else {
$("#ctawrapper.ctaFloat").removeClass('show'); //reached the desired point -- hide div
}
});
#ctawrapper.ctaFloat {
position: fixed;
bottom: 0;
height: auto;
max-height: 100px;
width: 90%;
display: none;
}
#ctawrapper.show {
background: #fff;
width: 100%;
z-index: 999;
left: 0px;
padding: 15px;
border: 1px solid #ddd;
display: block!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ctawrapper" class="clearfix ctaFloat">
<h4>sponsored topics</h4>
</div>
everything i have tried to do to add a new class or change the css once it reaches the footer have failed. can i get some help please?

hidden footer gradually appears on scroll

I am trying to make this effect on a project
http://www.cera-groupecera.com/en/
like this page the footer is hidden and appears as you scroll.
The page is wrapped in a page-content element and the footer is fixed to the bottom z-indexed 0
what happens is as you reach the end of the window the page -content margin rises as you scroll.
I can't really find a way to do it with j query
Here is an example,you just position it on the bottom of the page or in any other place you want it to stay,to hide it you can use z-index=-1;
//<br><br><br><br><br><br><br><br><br>
<h2><code>fixed</code></h2>
<div class="fixed"><div class="expand"></div></div>
<br><br><br><br><br><br><br><br>
CSS
#import "compass/css3";
h2 {
text-align: center;
margin-top: 48px;
}
div {
height: 200px;
width: 50%;
max-width: 600px;
margin: 32px auto;
overflow-x: hidden;
// overflow-y: scroll;
}
.fixed {
background: url('http://lorempixel.com/600/200/animals');
background-attachment: fixed;
overflow: hidden;
}
.expand {
height: 400px;
width: 100%;
}
https://jsfiddle.net/cu01m218/
I did one example for you.
$(function(){
calcFooter();
function calcFooter () {
var footer = $('.footer').height();
var mainContent = $('.main-content');
mainContent.css('margin-bottom', footer);
}
$(window).resize(calcFooter);
});
body {
margin: 0;
}
.main-content {
position: relative;
z-index: 100;
height: 100vh;
background-color: grey;
}
.footer {
position: fixed;
bottom: 0;
left: 0;
z-index: 10;
height: 200px;
width: 100%;
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="wrapper">
<div class="main-content" style="margin-bottom: 200px;">
<h1>This is main content.</h1>
<p>Scroll down to reveal footer!</p>
</div>
<div class="footer">
<p>This footer.</p>
</div>
</div>
Let's say that this element which appears at the bottom is footer tag.
In this case it will be something like this:
html:
<footer></footer>
in your css:
footer {
position: fixed;
bottom: 0;
display: none;
}
Then you have to add a class which will make footer appear
.active {
display: block;
}
and your jquery will be something like this:
$(window).on('scroll', function () {
if ($(this).scrollTop() > 50) {
if (!$(footer).hasClass('active')) {
$(footer).addClass('active');
}
} else {
if ($(footer).hasClass('active')) {
$(footer).removeClass('active');
}
}
});

Align Button At Bottom of Floating Div - BootStrap Responsive

I am trying to align a button at the bottom of a div that shows when the user scrolls down 600px.
I cannot get the button to align where I want it, as when i use margin-top, when the screensize changes, the button position changes, as I am using % because I want it to be responsive.
Here is the button code and the div code.
Button and div
<div class="topMenu"><button type="button" class="btn btn-sky btn-lg btn-float">Get Started</button></div>
.topMenu {
display: none;
position: fixed;
top: 0;
width: 100%;
height: 14%;
border-top: 1px solid #000;
background: #337AB7;
z-index: 1;
}
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 600) {
$('.topMenu').fadeIn();
} else {
$('.topMenu').fadeOut();
}
});
Thanks for any help.
First, take the link out of the button element. It's not valid HTML.
Next, you need to make your parent div's position relative and your button's position absolute. Give your button a bottom and left value and you should be good.
.topMenu {
position: relative;
width: 100%;
height: 1000px;
border-top: 1px solid #000;
background: #337AB7;
z-index: 1;
}
button {
position: absolute;
bottom: 0;
left: 50%;
display: none;
}

Navbar with fixed position staying on the top while header disappear

I want to make navbar with fixed position. At the top of the page the navbar should be under the header and after scrolling down when header is no longer visible the navbar should be at the top of the page. How can I do that? When I try to do it after scrolling down between the navbar and top of the page is still the height of the header(even though it is no longer visible).
Here is my css:
header{
background-color: red;
width: 100%;
height: 100px;
}
nav{
position: fixed;
float:left;
height: 100px;
width: 100px;
margin-left: 10px;
margin-right: 50px;
margin-top:50px;
background-color: green;
}
main{
background-color: blue;
height: 1500px;
margin-left:15%;
margin-right:5%;
margin-top:50px;
}
and jfiddle: https://jsfiddle.net/pg2kwk5e/
You can add a class to the nav element with javascript after scrolling a certain amount.
I've used Jquery as it's faster and easier to show this in action.
Example
I'm just adding a class .fixedTop to the nav after the window scrolls more than 150 pixels, the class itself just has top:0;margin0; to move the absolute positioned element to the top and remove the margin which was set before.
Code:
var $nav = $("nav"),
$(window).scroll(function() {
if($(this).scrollTop() > 150) {
$nav.addClass('fixedTop');
} else {
$nav.removeClass('fixedTop');
}
})
CSS:
.fixedTop {
top: 0;
margin: 0 !important;
}

Categories