var desc = document.querySelectorAll(".desc");
function change() {
var how = desc.length;
for(var i = 0; i < how; i++) {
desc[i].getElementsByTagName("p")[1].style.display = "none";
}
}
change();
function show(e) {
var target = e.target;
console.log(target);
}
for(var i = 0; i < desc.length; i++) {
desc[i].onclick = show;
}
.desc {
width: 80%;
margin: 0 auto;
border: 3px solid #cccccc;
padding: 5px;
margin-bottom: 10px;
}
<div class="desc">
<p>Pytanie: Dlaczego JavaScript jest taki fajny ?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus tortor lectus, in pellentesque sapien viverra eget. Ut maximus magna vitae mollis fringilla. In sit amet odio tincidunt, finibus arcu et, ullamcorper nisi. Nunc congue ut augue quis viverra. Donec sagittis, felis et bibendum condimentum, est ligula tempus quam, vel hendrerit tortor ipsum id enim. Mauris nisl ante, convallis sit amet orci a, blandit pellentesque mauris. Etiam sed elementum ipsum. Nullam consequat risus augue, nec ullamcorper massa varius eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eget sem in purus hendrerit aliquam. Vivamus at consequat tellus. Cras et eros mauris.</p>
</div>
<div class="desc">
<p>Pytanie: Dlaczego JavaScript jest taki fajny ?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus tortor lectus, in pellentesque sapien viverra eget. Ut maximus magna vitae mollis fringilla. In sit amet odio tincidunt, finibus arcu et, ullamcorper nisi. Nunc congue ut augue quis viverra. Donec sagittis, felis et bibendum condimentum, est ligula tempus quam, vel hendrerit tortor ipsum id enim. Mauris nisl ante, convallis sit amet orci a, blandit pellentesque mauris. Etiam sed elementum ipsum. Nullam consequat risus augue, nec ullamcorper massa varius eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eget sem in purus hendrerit aliquam. Vivamus at consequat tellus. Cras et eros mauris.</p>
</div>
<div class="desc">
<p>Pytanie: Dlaczego JavaScript jest taki fajny ?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus tortor lectus, in pellentesque sapien viverra eget. Ut maximus magna vitae mollis fringilla. In sit amet odio tincidunt, finibus arcu et, ullamcorper nisi. Nunc congue ut augue quis viverra. Donec sagittis, felis et bibendum condimentum, est ligula tempus quam, vel hendrerit tortor ipsum id enim. Mauris nisl ante, convallis sit amet orci a, blandit pellentesque mauris. Etiam sed elementum ipsum. Nullam consequat risus augue, nec ullamcorper massa varius eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eget sem in purus hendrerit aliquam. Vivamus at consequat tellus. Cras et eros mauris.</p>
</div>
I have problem: I get the target but I don't want a paragraph, but div with class .desc. And then I want to refer to this target and choose children. How I can do it? So, when someone clicks in this this or the text inside this div, I want to get in target only this div with class desc.
Even if you have set the onclick event for the <div> element you actually trigger the onclick event in the child <p> element, please see this answer https://stackoverflow.com/a/13966749/3029422
Depending on your implementation needs you can either stop the event propagation or just get the parent node.
Change your target variable to var target = e.target.parentNode; in order to have a reference to the <div> element:
var desc = document.querySelectorAll(".desc");
function change() {
var how = desc.length;
for (var i = 0; i < how; i++) {
desc[i].getElementsByTagName("p")[1].style.display = "none";
}
}
change();
function show(e) {
var target = e.target.parentNode;
console.log(target);
}
for (var i = 0; i < desc.length; i++) {
desc[i].onclick = show;
}
.desc {
width: 80%;
margin: 0 auto;
border: 3px solid #cccccc;
padding: 5px;
margin-bottom: 10px;
}
<div class="desc">
<p>Pytanie: Dlaczego JavaScript jest taki fajny ?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus tortor lectus, in pellentesque sapien viverra eget. Ut maximus magna vitae mollis fringilla. In sit amet odio tincidunt, finibus arcu et, ullamcorper nisi. Nunc congue ut augue quis
viverra. Donec sagittis, felis et bibendum condimentum, est ligula tempus quam, vel hendrerit tortor ipsum id enim. Mauris nisl ante, convallis sit amet orci a, blandit pellentesque mauris. Etiam sed elementum ipsum. Nullam consequat risus augue,
nec ullamcorper massa varius eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eget sem in purus hendrerit aliquam. Vivamus at consequat tellus. Cras et eros mauris.</p>
</div>
<div class="desc">
<p>Pytanie: Dlaczego JavaScript jest taki fajny ?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus tortor lectus, in pellentesque sapien viverra eget. Ut maximus magna vitae mollis fringilla. In sit amet odio tincidunt, finibus arcu et, ullamcorper nisi. Nunc congue ut augue quis
viverra. Donec sagittis, felis et bibendum condimentum, est ligula tempus quam, vel hendrerit tortor ipsum id enim. Mauris nisl ante, convallis sit amet orci a, blandit pellentesque mauris. Etiam sed elementum ipsum. Nullam consequat risus augue,
nec ullamcorper massa varius eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eget sem in purus hendrerit aliquam. Vivamus at consequat tellus. Cras et eros mauris.</p>
</div>
<div class="desc">
<p>Pytanie: Dlaczego JavaScript jest taki fajny ?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus tortor lectus, in pellentesque sapien viverra eget. Ut maximus magna vitae mollis fringilla. In sit amet odio tincidunt, finibus arcu et, ullamcorper nisi. Nunc congue ut augue quis
viverra. Donec sagittis, felis et bibendum condimentum, est ligula tempus quam, vel hendrerit tortor ipsum id enim. Mauris nisl ante, convallis sit amet orci a, blandit pellentesque mauris. Etiam sed elementum ipsum. Nullam consequat risus augue,
nec ullamcorper massa varius eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eget sem in purus hendrerit aliquam. Vivamus at consequat tellus. Cras et eros mauris.</p>
</div>
Related
It's hard to explain using words, better look at example i made.
https://jsfiddle.net/yoz6pkh0/
<nav>
<div class="container">
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
<div class="filter">FILTER</div>
</div>
</nav>
<div class="hero">
<h1>Hello to Lorem!</h1>
<p>Lorem ipsum dolor sit amet</p>
<div class="filter inhero">FILTER</div>
</div>
<div class="main">
<p>Lorem ipsum ...</p>
...
<p>Lorem ipsum ...</p>
</div>
I have the navbar that i hide on scrolling page down and show on scrolling up.
I need to make an element (lets call it FILTER) that on page load is located in hero-section but become sticky to navbar when scrolling to FILTER position or below and vice versa when scrolling up.
I solved the problem in my way but i wonder if any better solution exists? Is it necessary to clone FILTER element?
I think there is a better solution than cloning the element, you can use this code:
HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<nav>
<div class="container">
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
</div>
</nav>
<div class="hero">
<h1>Hello to Lorem!</h1>
<p>Lorem ipsum dolor sit amet</p>
<div class="filter inhero">FILTER</div>
</div>
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
</div>
</body>
</html>
CSS:
body {
margin: 0;
}
.container {
margin: 0px 200px;
position: relative;
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
nav {
background-color: blue;
color: white;
margin: 0;
position: fixed;
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
top: 0px;
transition: top 0.5s;
}
.filter {
background-color: red;
color: white;
padding: 10px;
}
ul {
list-style-type: none;
display: flex;
margin: 0;
padding: 0;
}
li {
padding: 15px;
}
.main {
padding: 50px 200px;
}
.hero {
padding: 150px 200px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: bisque;
height: 250px;
}
JS:
let filter = document.getElementsByClassName("filter")[0];
let fixed = false;
let filterTop = filter.getBoundingClientRect().top + window.scrollY;
window.addEventListener("scroll", function() {
if (filter.getBoundingClientRect().top <= 50 && !fixed) {
filter.style.position = 'fixed';
filter.style.top = '50px';
fixed = true;
} else if (window.scrollY <= filterTop - 50 && fixed) {
filter.style.position = 'static';
filter.style.top = '';
fixed = false;
}
});
What I've done here is removing the clone (and the styles related to it ) and making the position of the filter fixed or static according to the scroll.
I have an effect that makes the header become un-fixed when a specified div hits the top of the screen, and scroll with the rest of the content.
This works perfectly and i wrapped the "const targetTopPos = targetEl.getBoundingClientRect().top" in a resize event listener. But its calculations are wrong if the page is already scrolled and i have no idea why.
Another issue is that if the page is refreshed scrolled down, the header will be there until you scroll.
Here is the code:
window.onresize = function(event) {
const targetTopPos = targetEl.getBoundingClientRect().top;
console.log(targetTopPos);
};
const headerEl = document.querySelector('header')
const targetEl = document.querySelector('#target')
const targetTopPos = targetEl.getBoundingClientRect().top
let isHeaderFixed = true
document.onscroll = () => {
const targetTopOffset = targetEl.getBoundingClientRect().top
if (isHeaderFixed && targetTopOffset < 100) {
headerEl.style.position = 'absolute'
headerEl.style.top = `${targetTopPos - 100}px`
isHeaderFixed = !isHeaderFixed
}
if (!isHeaderFixed && targetTopOffset >= 100) {
headerEl.style.position = 'fixed'
headerEl.style.top = '0px'
isHeaderFixed = !isHeaderFixed
}
}
body {
padding: 0;
margin: 0;
position: relative;
}
header {
position: fixed;
height: 100px;
width: 100%;
background: lightblue;
}
.content {
line-height: 100px;
}
.target {
width: 100%;
background: red;
}
<header>
Custom header
</header>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit tellus urna, ut tristique felis lobortis sed. Phasellus maximus at magna mattis vulputate. Pellentesque tempor, urna vitae congue pellentesque, est mauris faucibus nulla, vitae molestie leo purus a leo. Curabitur ut mi ac sem finibus consectetur a blandit massa. Morbi ornare tincidunt ipsum, et accumsan erat fringilla a. Cras egestas, nibh vel condimentum ultrices, nunc ipsum tempus magna, eu ullamcorper tortor magna id lacus. Morbi euismod lacus a ligula rutrum, in aliquet lectus blandit. Nam placerat sollicitudin lectus eu ornare. Etiam placerat diam eget magna blandit rutrum. Nulla et luctus massa. Sed sit amet mauris in magna tincidunt consequat. Proin mattis sit amet arcu a gravida. Nullam tempor urna nec dolor convallis consectetur sit amet a elit. Cras ut odio nec lacus efficitur porta nec sit amet justo.
</div>
<div id="target" class="target">target</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit tellus urna, ut tristique felis lobortis sed. Phasellus maximus at magna mattis vulputate. Pellentesque tempor, urna vitae congue pellentesque, est mauris faucibus nulla, vitae molestie leo purus a leo. Curabitur ut mi ac sem finibus consectetur a blandit massa. Morbi ornare tincidunt ipsum, et accumsan erat fringilla a. Cras egestas, nibh vel condimentum ultrices, nunc ipsum tempus magna, eu ullamcorper tortor magna id lacus. Morbi euismod lacus a ligula rutrum, in aliquet lectus blandit. Nam placerat sollicitudin lectus eu ornare. Etiam placerat diam eget magna blandit rutrum. Nulla et luctus massa. Sed sit amet mauris in magna tincidunt consequat. Proin mattis sit amet arcu a gravida. Nullam tempor urna nec dolor convallis consectetur sit amet a elit. Cras ut odio nec lacus efficitur porta nec sit amet justo.
</div>
I write the "targetTopPos" to the console so you can see the issue
It's because you redefine targetTopPos as a const in your onresize event.
You only have to asign the new value to targetTopPos
see code below
window.onresize = function(event) {
targetTopPos = targetEl.getBoundingClientRect().top;
console.log(targetTopPos);
};
const headerEl = document.querySelector('header')
const targetEl = document.querySelector('#target')
let targetTopPos = targetEl.getBoundingClientRect().top
let isHeaderFixed = true
document.onscroll = () => {
const targetTopOffset = targetEl.getBoundingClientRect().top
if (isHeaderFixed && targetTopOffset < 100) {
headerEl.style.position = 'absolute'
headerEl.style.top = `${targetTopPos - 100}px`
isHeaderFixed = !isHeaderFixed
}
if (!isHeaderFixed && targetTopOffset >= 100) {
headerEl.style.position = 'fixed'
headerEl.style.top = '0px'
isHeaderFixed = !isHeaderFixed
}
}
body {
padding: 0;
margin: 0;
position: relative;
}
header {
position: fixed;
height: 100px;
width: 100%;
background: lightblue;
}
.content {
line-height: 100px;
}
.target {
width: 100%;
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
Custom header
</header>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit tellus urna, ut tristique felis lobortis sed. Phasellus maximus at magna mattis vulputate. Pellentesque tempor, urna vitae congue pellentesque, est mauris faucibus nulla, vitae molestie leo purus a leo. Curabitur ut mi ac sem finibus consectetur a blandit massa. Morbi ornare tincidunt ipsum, et accumsan erat fringilla a. Cras egestas, nibh vel condimentum ultrices, nunc ipsum tempus magna, eu ullamcorper tortor magna id lacus. Morbi euismod lacus a ligula rutrum, in aliquet lectus blandit. Nam placerat sollicitudin lectus eu ornare. Etiam placerat diam eget magna blandit rutrum. Nulla et luctus massa. Sed sit amet mauris in magna tincidunt consequat. Proin mattis sit amet arcu a gravida. Nullam tempor urna nec dolor convallis consectetur sit amet a elit. Cras ut odio nec lacus efficitur porta nec sit amet justo.
</div>
<div id="target" class="target">target</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit tellus urna, ut tristique felis lobortis sed. Phasellus maximus at magna mattis vulputate. Pellentesque tempor, urna vitae congue pellentesque, est mauris faucibus nulla, vitae molestie leo purus a leo. Curabitur ut mi ac sem finibus consectetur a blandit massa. Morbi ornare tincidunt ipsum, et accumsan erat fringilla a. Cras egestas, nibh vel condimentum ultrices, nunc ipsum tempus magna, eu ullamcorper tortor magna id lacus. Morbi euismod lacus a ligula rutrum, in aliquet lectus blandit. Nam placerat sollicitudin lectus eu ornare. Etiam placerat diam eget magna blandit rutrum. Nulla et luctus massa. Sed sit amet mauris in magna tincidunt consequat. Proin mattis sit amet arcu a gravida. Nullam tempor urna nec dolor convallis consectetur sit amet a elit. Cras ut odio nec lacus efficitur porta nec sit amet justo.
</div>
I have a function that will showing div element if the scrollTop > 50, and hide it if less than 100, but my issue is when I try to playing with my window scroll like scroll to up and down repeatedly with quickly (like 5x) and stop it immediately, the div element still running up and down, how to prevent this issue keep running ? really appreciate your help.
$(document).ready(function() {
$(document).scroll(function(e) {
e.stopPropagation();
if ($(this).scrollTop() > 50) {
$(".head").slideDown();
} else {
$(".head").slideUp();
}
});
});
.head {
display: none;
height: 50px;
width: 100%;
position: fixed;
top: 0;
background: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<title></title>
</head>
<body>
<div class="head"></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse posuere dui a nisl malesuada, eget sodales tellus faucibus. Duis malesuada in nunc a sodales. Cras laoreet rhoncus dolor ac iaculis. Vivamus dignissim, elit sit amet molestie interdum,
leo mi hendrerit augue, ac ullamcorper tortor libero eget dui. Morbi blandit nulla iaculis, suscipit metus ac, sodales enim. Etiam rhoncus dolor non dui facilisis mollis. In fringilla pellentesque erat, eget vestibulum ex bibendum non. Mauris ac orci
sit amet ligula luctus vulputate. Sed at maximus quam. Vivamus maximus ultrices condimentum. Nulla mattis, sapien in ultricies aliquam, ante orci rhoncus tellus, vel euismod dolor ante tempus magna. Suspendisse potenti. Vestibulum a diam a dolor vestibulum
faucibus id sit amet neque. Ut fringilla neque malesuada pellentesque tristique. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ut lacinia lectus, ultrices fringilla felis. Donec nunc enim, rutrum ac ullamcorper
a, lacinia et ante. Sed feugiat nisl in luctus tincidunt. Proin accumsan metus vitae tincidunt laoreet. Curabitur posuere, magna quis venenatis egestas, lorem orci accumsan ipsum, tristique posuere magna ante at elit. Nullam sagittis semper hendrerit.
Nunc tempus lobortis risus eu dictum. Nullam molestie dui non eleifend placerat. Nunc at est porta, scelerisque eros nec, bibendum turpis. Duis et sagittis ex, sed euismod justo. In malesuada imperdiet enim, vitae volutpat eros. In porta diam at justo
volutpat fringilla. Nam sit amet metus sit amet odio gravida convallis pharetra id metus. Nunc ultrices, felis ut sagittis dignissim, ex urna consequat ipsum, sit amet venenatis est orci non risus. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Suspendisse posuere dui a nisl malesuada, eget sodales tellus faucibus. Duis malesuada in nunc a sodales. Cras laoreet rhoncus dolor ac iaculis. Vivamus dignissim, elit sit amet molestie interdum, leo mi hendrerit augue, ac ullamcorper tortor
libero eget dui. Morbi blandit nulla iaculis, suscipit metus ac, sodales enim. Etiam rhoncus dolor non dui facilisis mollis. In fringilla pellentesque erat, eget vestibulum ex bibendum non. Mauris ac orci sit amet ligula luctus vulputate. Sed at maximus
quam. Vivamus maximus ultrices condimentum. Nulla mattis, sapien in ultricies aliquam, ante orci rhoncus tellus, vel euismod dolor ante tempus magna. Suspendisse potenti. Vestibulum a diam a dolor vestibulum faucibus id sit amet neque. Ut fringilla
neque malesuada pellentesque tristique. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ut lacinia lectus, ultrices fringilla felis. Donec nunc enim, rutrum ac ullamcorper a, lacinia et ante. Sed feugiat
nisl in luctus tincidunt. Proin accumsan metus vitae tincidunt laoreet. Curabitur posuere, magna quis venenatis egestas, lorem orci accumsan ipsum, tristique posuere magna ante at elit. Nullam sagittis semper hendrerit. Nunc tempus lobortis risus
eu dictum. Nullam molestie dui non eleifend placerat. Nunc at est porta, scelerisque eros nec, bibendum turpis. Duis et sagittis ex, sed euismod justo. In malesuada imperdiet enim, vitae volutpat eros. In porta diam at justo volutpat fringilla. Nam
sit amet metus sit amet odio gravida convallis pharetra id metus. Nunc ultrices, felis ut sagittis dignissim, ex urna consequat ipsum, sit amet venenatis est orci non risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse posuere
dui a nisl malesuada, eget sodales tellus faucibus. Duis malesuada in nunc a sodales. Cras laoreet rhoncus dolor ac iaculis. Vivamus dignissim, elit sit amet molestie interdum, leo mi hendrerit augue, ac ullamcorper tortor libero eget dui. Morbi blandit
nulla iaculis, suscipit metus ac, sodales enim. Etiam rhoncus dolor non dui facilisis mollis. In fringilla pellentesque erat, eget vestibulum ex bibendum non. Mauris ac orci sit amet ligula luctus vulputate. Sed at maximus quam. Vivamus maximus ultrices
condimentum. Nulla mattis, sapien in ultricies aliquam, ante orci rhoncus tellus, vel euismod dolor ante tempus magna. Suspendisse potenti. Vestibulum a diam a dolor vestibulum faucibus id sit amet neque. Ut fringilla neque malesuada pellentesque
tristique. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ut lacinia lectus, ultrices fringilla felis. Donec nunc enim, rutrum ac ullamcorper a, lacinia et ante. Sed feugiat nisl in luctus tincidunt. Proin
accumsan metus vitae tincidunt laoreet. Curabitur posuere, magna quis venenatis egestas, lorem orci accumsan ipsum, tristique posuere magna ante at elit. Nullam sagittis semper hendrerit. Nunc tempus lobortis risus eu dictum. Nullam molestie dui non
eleifend placerat. Nunc at est porta, scelerisque eros nec, bibendum turpis. Duis et sagittis ex, sed euismod justo. In malesuada imperdiet enim, vitae volutpat eros. In porta diam at justo volutpat fringilla. Nam sit amet metus sit amet odio gravida
convallis pharetra id metus. Nunc ultrices, felis ut sagittis dignissim, ex urna consequat ipsum, sit amet venenatis est orci non risus.
</p>
</body>
</html>
You can use setTimeout function to prevent animation from being added to the animation queue each time user scrolls up or down and to only animate your div after a short delay:
$(document).ready(function() {
let timer;
$(document).scroll(function(e) {
e.stopPropagation();
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
if ($(this).scrollTop() > 50) {
$(".head").slideDown();
} else {
$(".head").slideUp();
}
}, 100);
});
});
.head {
display: none;
height: 50px;
width: 100%;
position: fixed;
top: 0;
background: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<title></title>
</head>
<body>
<div class="head"></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse posuere dui a nisl malesuada, eget sodales tellus faucibus. Duis malesuada in nunc a sodales. Cras laoreet rhoncus dolor ac iaculis. Vivamus dignissim, elit sit amet molestie interdum,
leo mi hendrerit augue, ac ullamcorper tortor libero eget dui. Morbi blandit nulla iaculis, suscipit metus ac, sodales enim. Etiam rhoncus dolor non dui facilisis mollis. In fringilla pellentesque erat, eget vestibulum ex bibendum non. Mauris ac orci
sit amet ligula luctus vulputate. Sed at maximus quam. Vivamus maximus ultrices condimentum. Nulla mattis, sapien in ultricies aliquam, ante orci rhoncus tellus, vel euismod dolor ante tempus magna. Suspendisse potenti. Vestibulum a diam a dolor vestibulum
faucibus id sit amet neque. Ut fringilla neque malesuada pellentesque tristique. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ut lacinia lectus, ultrices fringilla felis. Donec nunc enim, rutrum ac ullamcorper
a, lacinia et ante. Sed feugiat nisl in luctus tincidunt. Proin accumsan metus vitae tincidunt laoreet. Curabitur posuere, magna quis venenatis egestas, lorem orci accumsan ipsum, tristique posuere magna ante at elit. Nullam sagittis semper hendrerit.
Nunc tempus lobortis risus eu dictum. Nullam molestie dui non eleifend placerat. Nunc at est porta, scelerisque eros nec, bibendum turpis. Duis et sagittis ex, sed euismod justo. In malesuada imperdiet enim, vitae volutpat eros. In porta diam at justo
volutpat fringilla. Nam sit amet metus sit amet odio gravida convallis pharetra id metus. Nunc ultrices, felis ut sagittis dignissim, ex urna consequat ipsum, sit amet venenatis est orci non risus. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Suspendisse posuere dui a nisl malesuada, eget sodales tellus faucibus. Duis malesuada in nunc a sodales. Cras laoreet rhoncus dolor ac iaculis. Vivamus dignissim, elit sit amet molestie interdum, leo mi hendrerit augue, ac ullamcorper tortor
libero eget dui. Morbi blandit nulla iaculis, suscipit metus ac, sodales enim. Etiam rhoncus dolor non dui facilisis mollis. In fringilla pellentesque erat, eget vestibulum ex bibendum non. Mauris ac orci sit amet ligula luctus vulputate. Sed at maximus
quam. Vivamus maximus ultrices condimentum. Nulla mattis, sapien in ultricies aliquam, ante orci rhoncus tellus, vel euismod dolor ante tempus magna. Suspendisse potenti. Vestibulum a diam a dolor vestibulum faucibus id sit amet neque. Ut fringilla
neque malesuada pellentesque tristique. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ut lacinia lectus, ultrices fringilla felis. Donec nunc enim, rutrum ac ullamcorper a, lacinia et ante. Sed feugiat
nisl in luctus tincidunt. Proin accumsan metus vitae tincidunt laoreet. Curabitur posuere, magna quis venenatis egestas, lorem orci accumsan ipsum, tristique posuere magna ante at elit. Nullam sagittis semper hendrerit. Nunc tempus lobortis risus
eu dictum. Nullam molestie dui non eleifend placerat. Nunc at est porta, scelerisque eros nec, bibendum turpis. Duis et sagittis ex, sed euismod justo. In malesuada imperdiet enim, vitae volutpat eros. In porta diam at justo volutpat fringilla. Nam
sit amet metus sit amet odio gravida convallis pharetra id metus. Nunc ultrices, felis ut sagittis dignissim, ex urna consequat ipsum, sit amet venenatis est orci non risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse posuere
dui a nisl malesuada, eget sodales tellus faucibus. Duis malesuada in nunc a sodales. Cras laoreet rhoncus dolor ac iaculis. Vivamus dignissim, elit sit amet molestie interdum, leo mi hendrerit augue, ac ullamcorper tortor libero eget dui. Morbi blandit
nulla iaculis, suscipit metus ac, sodales enim. Etiam rhoncus dolor non dui facilisis mollis. In fringilla pellentesque erat, eget vestibulum ex bibendum non. Mauris ac orci sit amet ligula luctus vulputate. Sed at maximus quam. Vivamus maximus ultrices
condimentum. Nulla mattis, sapien in ultricies aliquam, ante orci rhoncus tellus, vel euismod dolor ante tempus magna. Suspendisse potenti. Vestibulum a diam a dolor vestibulum faucibus id sit amet neque. Ut fringilla neque malesuada pellentesque
tristique. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ut lacinia lectus, ultrices fringilla felis. Donec nunc enim, rutrum ac ullamcorper a, lacinia et ante. Sed feugiat nisl in luctus tincidunt. Proin
accumsan metus vitae tincidunt laoreet. Curabitur posuere, magna quis venenatis egestas, lorem orci accumsan ipsum, tristique posuere magna ante at elit. Nullam sagittis semper hendrerit. Nunc tempus lobortis risus eu dictum. Nullam molestie dui non
eleifend placerat. Nunc at est porta, scelerisque eros nec, bibendum turpis. Duis et sagittis ex, sed euismod justo. In malesuada imperdiet enim, vitae volutpat eros. In porta diam at justo volutpat fringilla. Nam sit amet metus sit amet odio gravida
convallis pharetra id metus. Nunc ultrices, felis ut sagittis dignissim, ex urna consequat ipsum, sit amet venenatis est orci non risus.
</p>
</body>
</html>
Goal:
Change the picture when you have the cursor over the candy picture into this cat picture (http://cdn-img.easyicon.net/png/5265/526508.gif).
Problem:
Don't know how to do it in this context.
Info:
Dont forget to make the page into a full screen after you have pressed the "Run the snippet"
p {
font-size: 24px;
}
#foo {
position:fixed;
right:0;
display:block;
top:400px;
width:128px;
height:128px;
background: #f00 url('http://icons.iconarchive.com/icons/uiconstock/50-free-christmas/128/candy-2-icon.png') no-repeat 50% 50%;
}
#fooo {
position:fixed;
left:0;
display:block;
top:400px;
width:128px;
height:128px;
background: #f00 url('http://icons.iconarchive.com/icons/uiconstock/50-free-christmas/128/candy-2-icon.png') no-repeat 50% 50%;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Ut dapibus aliquet imperdiet. Maecenas gravida sagittis eros, nec vestibulum lacus sagittis at. Nulla enim dui, ultricies a quam id, placerat placerat erat. Donec pretium orci purus, eget tristique neque mattis eget. Nullam mattis accumsan urna et faucibus. Praesent tincidunt lobortis tortor, maximus tincidunt neque cursus luctus. Sed in rutrum lacus. Nunc volutpat fringilla diam. Curabitur accumsan, est sed mattis ultricies, augue quam suscipit nisi, sit amet lobortis erat lorem in nunc. Nullam sagittis vulputate placerat. Nullam fringilla arcu id purus pretium, sed fringilla ligula aliquam.</p>
<p>Morbi quis mauris condimentum, accumsan nunc ac, porttitor nibh. Pellentesque maximus dolor nisi, eget bibendum nibh feugiat mollis. Donec lacinia turpis vulputate, viverra sapien in, aliquam metus. Etiam posuere, urna at dapibus placerat, lacus dolor imperdiet lorem, sit amet efficitur ante dui efficitur est. Cras quis tincidunt sapien. Fusce sit amet ultricies mauris. Mauris sit amet faucibus velit. Pellentesque non leo ante.</p>
<p>Sed eget lacus sodales, porttitor justo non, ornare magna. Phasellus pulvinar porta eros eget ultricies. Aliquam ante lectus, ultricies vel iaculis nec, posuere quis sapien. Praesent nisi purus, fermentum nec tortor sagittis, efficitur consectetur ipsum. Vivamus condimentum velit sed dictum fringilla. Mauris eu vulputate neque, eu ornare justo. Ut iaculis et libero nec lobortis. Quisque euismod quam felis, sed imperdiet enim feugiat fermentum. In viverra turpis molestie luctus elementum. Vestibulum quis vulputate massa. Praesent convallis congue dolor nec ornare. Aliquam lobortis est vitae lorem tempor viverra.</p>
<p>Duis commodo congue porttitor. Aenean nunc arcu, ultricies semper cursus a, euismod eget orci. Etiam tempus aliquam nisl non tristique. Fusce lobortis sagittis enim, id mattis magna semper congue. Nulla ornare venenatis ante, hendrerit sagittis dolor ultricies nec. Praesent varius sit amet odio quis lobortis. Praesent quis egestas sem, eget dignissim felis. Pellentesque risus enim, viverra a blandit in, laoreet sed quam. Duis et congue risus, sed consequat massa. Nunc non pharetra tortor. Morbi elementum magna vitae rutrum pulvinar. Donec sit amet leo arcu.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<div id="foo">
aaa
</div>
<div id="fooo">
bbb
</div>
use :hover:
#foo:hover, #fooo:hover {
background: #f00 url('http://cdn-img.easyicon.net/png/5265/526508.gif') no-repeat 50% 50%;
}
This one does
p {
font-size: 24px;
}
#foo {
position:fixed;
right:0;
display:block;
top:400px;
width:128px;
height:128px;
background: #f00 url('http://icons.iconarchive.com/icons/uiconstock/50-free-christmas/128/candy-2-icon.png') no-repeat 50% 50%;
}
#fooo {
position:fixed;
left:0;
display:block;
top:400px;
width:128px;
height:128px;
background: #f00 url('http://icons.iconarchive.com/icons/uiconstock/50-free-christmas/128/candy-2-icon.png') no-repeat 50% 50%;
}
#fooo:hover, #foo:hover {
background: #f00 url('http://cdn-img.easyicon.net/png/5265/526508.gif') no-repeat 50% 50%;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Ut dapibus aliquet imperdiet. Maecenas gravida sagittis eros, nec vestibulum lacus sagittis at. Nulla enim dui, ultricies a quam id, placerat placerat erat. Donec pretium orci purus, eget tristique neque mattis eget. Nullam mattis accumsan urna et faucibus. Praesent tincidunt lobortis tortor, maximus tincidunt neque cursus luctus. Sed in rutrum lacus. Nunc volutpat fringilla diam. Curabitur accumsan, est sed mattis ultricies, augue quam suscipit nisi, sit amet lobortis erat lorem in nunc. Nullam sagittis vulputate placerat. Nullam fringilla arcu id purus pretium, sed fringilla ligula aliquam.</p>
<p>Morbi quis mauris condimentum, accumsan nunc ac, porttitor nibh. Pellentesque maximus dolor nisi, eget bibendum nibh feugiat mollis. Donec lacinia turpis vulputate, viverra sapien in, aliquam metus. Etiam posuere, urna at dapibus placerat, lacus dolor imperdiet lorem, sit amet efficitur ante dui efficitur est. Cras quis tincidunt sapien. Fusce sit amet ultricies mauris. Mauris sit amet faucibus velit. Pellentesque non leo ante.</p>
<p>Sed eget lacus sodales, porttitor justo non, ornare magna. Phasellus pulvinar porta eros eget ultricies. Aliquam ante lectus, ultricies vel iaculis nec, posuere quis sapien. Praesent nisi purus, fermentum nec tortor sagittis, efficitur consectetur ipsum. Vivamus condimentum velit sed dictum fringilla. Mauris eu vulputate neque, eu ornare justo. Ut iaculis et libero nec lobortis. Quisque euismod quam felis, sed imperdiet enim feugiat fermentum. In viverra turpis molestie luctus elementum. Vestibulum quis vulputate massa. Praesent convallis congue dolor nec ornare. Aliquam lobortis est vitae lorem tempor viverra.</p>
<p>Duis commodo congue porttitor. Aenean nunc arcu, ultricies semper cursus a, euismod eget orci. Etiam tempus aliquam nisl non tristique. Fusce lobortis sagittis enim, id mattis magna semper congue. Nulla ornare venenatis ante, hendrerit sagittis dolor ultricies nec. Praesent varius sit amet odio quis lobortis. Praesent quis egestas sem, eget dignissim felis. Pellentesque risus enim, viverra a blandit in, laoreet sed quam. Duis et congue risus, sed consequat massa. Nunc non pharetra tortor. Morbi elementum magna vitae rutrum pulvinar. Donec sit amet leo arcu.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<div id="foo">
aaa
</div>
<div id="fooo">
bbb
</div>
The hover option will do the job:
#foo:hover
{
position:fixed;
right:0;
display:block;
top:400px;
width:128px;
height:128px;
background: #f00 url('http://icons.iconarchive.com/icons/uiconstock/50-free-christmas/128/candy-2-icon.png') no-repeat 50% 50%;
}
I am trying to create a hidden div (a header) that slides down once the scroll readers a certain point. Very similar to this site.
I trying to inspect it to see how they did it, but I can't figure it out. I am not sure if they use pure CSS transitions or script. Many .js and javascripts do the opposite and have a div slide up/hide, but that isn't want I want.
I know that I have to build out two headers, one visible and one hidden. I am lost as to how to make the hidden header visible when I scroll down to 200px for example.
The HTML:
<div id="logo">
</div><!-- end logo --!>
<header>
<nav class="mainnav" role="navigation">
link
link
link
link
</nav>
<ul class="socialhead">
<li>fb</li>
<li>fb</li>
<li>fb</li>
</ul>
</header>
</div><!-- end header home --!>
<div class="header_homehidden">
<div id="logo">
</div><!-- end logo --!>
<header>
<nav class="mainnav" role="navigation">
link
link
link
link
</nav>
<ul class="socialhead">
<li>fb</li>
<li>fb</li>
<li>fb</li>
</ul>
</header>
</div><!-- end header homehidden --!>
The CSS:
.header_homehidden {
webkit-transform: translateY(-90px);
-moz-transform: translateY(-90px);
transform: translateY(-90px);
}
.header_home {
position: absolute;
z-index: 999;
color: #fff;
width: 100%;
background-color: transparent;
}
.header {
position: fixed;
top: 0px;
width: 100%;
background: white;
padding-top: 20px;
z-index: 999;
color: #000;
}
</style>
Any help is much appreciated.
HTML:
<body>
<div>
<div class="header"></div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rhoncus ultricies convallis. Vivamus ornare diam sit amet nisl condimentum egestas. In mi nisi, molestie vel libero nec, facilisis egestas nulla. Integer condimentum nibh vitae rutrum consectetur. Vestibulum luctus sodales risus a elementum. Suspendisse porta felis vel urna rutrum mollis. In eleifend pharetra scelerisque. Praesent pellentesque molestie eleifend. Nulla magna nibh, vehicula vitae consectetur sed, eleifend id nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec leo id magna vulputate tristique. Fusce nec neque metus. Etiam euismod, mi ac sagittis ultrices, nisl arcu ullamcorper neque, nec blandit mauris lorem non tellus. Vivamus tincidunt orci sem, facilisis dapibus velit luctus vulputate. Fusce sed nibh velit. Nullam lacinia eget felis et interdum. Ut facilisis non turpis quis dapibus. Aliquam iaculis in magna in pulvinar. Maecenas tempor tristique augue ut elementum. Nullam commodo urna a faucibus vulputate. Nam sodales nulla ac nisl iaculis laoreet. Proin turpis justo, sagittis vitae arcu et, elementum scelerisque risus. Duis vitae nunc faucibus, adipiscing metus nec, malesuada felis. Morbi ut auctor sapien. Morbi pharetra laoreet urna nec mattis. Nullam facilisis venenatis nunc, ut adipiscing sapien accumsan quis. Sed pellentesque tincidunt sapien, in consequat libero convallis sit amet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque imperdiet sem orci, vel venenatis purus suscipit a. Ut facilisis nunc elit, quis rhoncus nunc egestas a. Ut vitae dictum massa. Curabitur nec posuere arcu. Aliquam erat volutpat. Mauris non tortor in est commodo commodo nec eget purus. Mauris enim lorem, lacinia sollicitudin libero vel, consectetur congue diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. In pharetra fringilla velit at volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rhoncus ultricies convallis. Vivamus ornare diam sit amet nisl condimentum egestas. In mi nisi, molestie vel libero nec, facilisis egestas nulla. Integer condimentum nibh vitae rutrum consectetur. Vestibulum luctus sodales risus a elementum. Suspendisse porta felis vel urna rutrum mollis. In eleifend pharetra scelerisque. Praesent pellentesque molestie eleifend. Nulla magna nibh, vehicula vitae consectetur sed, eleifend id nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec leo id magna vulputate tristique. Fusce nec neque metus. Etiam euismod, mi ac sagittis ultrices, nisl arcu ullamcorper neque, nec blandit mauris lorem non tellus. Vivamus tincidunt orci sem, facilisis dapibus velit luctus vulputate. Fusce sed nibh velit. Nullam lacinia eget felis et interdum. Ut facilisis non turpis quis dapibus. Aliquam iaculis in magna in pulvinar. Maecenas tempor tristique augue ut elementum. Nullam commodo urna a faucibus vulputate. Nam sodales nulla ac nisl iaculis laoreet. Proin turpis justo, sagittis vitae arcu et, elementum scelerisque risus. Duis vitae nunc faucibus, adipiscing metus nec, malesuada felis. Morbi ut auctor sapien. Morbi pharetra laoreet urna nec mattis. Nullam facilisis venenatis nunc, ut adipiscing sapien accumsan quis. Sed pellentesque tincidunt sapien, in consequat libero convallis sit amet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque imperdiet sem orci, vel venenatis purus suscipit a. Ut facilisis nunc elit, quis rhoncus nunc egestas a. Ut vitae dictum massa. Curabitur nec posuere arcu. Aliquam erat volutpat. Mauris non tortor in est commodo commodo nec eget purus. Mauris enim lorem, lacinia sollicitudin libero vel, consectetur congue diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. In pharetra fringilla velit at volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rhoncus ultricies convallis. Vivamus ornare diam sit amet nisl condimentum egestas. In mi nisi, molestie vel libero nec, facilisis egestas nulla. Integer condimentum nibh vitae rutrum consectetur. Vestibulum luctus sodales risus a elementum. Suspendisse porta felis vel urna rutrum mollis. In eleifend pharetra scelerisque. Praesent pellentesque molestie eleifend. Nulla magna nibh, vehicula vitae consectetur sed, eleifend id nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec leo id magna vulputate tristique. Fusce nec neque metus. Etiam euismod, mi ac sagittis ultrices, nisl arcu ullamcorper neque, nec blandit mauris lorem non tellus. Vivamus tincidunt orci sem, facilisis dapibus velit luctus vulputate. Fusce sed nibh velit. Nullam lacinia eget felis et interdum. Ut facilisis non turpis quis dapibus. Aliquam iaculis in magna in pulvinar. Maecenas tempor tristique augue ut elementum. Nullam commodo urna a faucibus vulputate. Nam sodales nulla ac nisl iaculis laoreet. Proin turpis justo, sagittis vitae arcu et, elementum scelerisque risus. Duis vitae nunc faucibus, adipiscing metus nec, malesuada felis. Morbi ut auctor sapien. Morbi pharetra laoreet urna nec mattis. Nullam facilisis venenatis nunc, ut adipiscing sapien accumsan quis. Sed pellentesque tincidunt sapien, in consequat libero convallis sit amet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque imperdiet sem orci, vel venenatis purus suscipit a. Ut facilisis nunc elit, quis rhoncus nunc egestas a. Ut vitae dictum massa. Curabitur nec posuere arcu. Aliquam erat volutpat. Mauris non tortor in est commodo commodo nec eget purus. Mauris enim lorem, lacinia sollicitudin libero vel, consectetur congue diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. In pharetra fringilla velit at volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rhoncus ultricies convallis. Vivamus ornare diam sit amet nisl condimentum egestas. In mi nisi, molestie vel libero nec, facilisis egestas nulla. Integer condimentum nibh vitae rutrum consectetur. Vestibulum luctus sodales risus a elementum. Suspendisse porta felis vel urna rutrum mollis. In eleifend pharetra scelerisque. Praesent pellentesque molestie eleifend. Nulla magna nibh, vehicula vitae consectetur sed, eleifend id nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec leo id magna vulputate tristique. Fusce nec neque metus. Etiam euismod, mi ac sagittis ultrices, nisl arcu ullamcorper neque, nec blandit mauris lorem non tellus. Vivamus tincidunt orci sem, facilisis dapibus velit luctus vulputate. Fusce sed nibh velit. Nullam lacinia eget felis et interdum. Ut facilisis non turpis quis dapibus. Aliquam iaculis in magna in pulvinar. Maecenas tempor tristique augue ut elementum. Nullam commodo urna a faucibus vulputate. Nam sodales nulla ac nisl iaculis laoreet. Proin turpis justo, sagittis vitae arcu et, elementum scelerisque risus. Duis vitae nunc faucibus, adipiscing metus nec, malesuada felis. Morbi ut auctor sapien. Morbi pharetra laoreet urna nec mattis. Nullam facilisis venenatis nunc, ut adipiscing sapien accumsan quis. Sed pellentesque tincidunt sapien, in consequat libero convallis sit amet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque imperdiet sem orci, vel venenatis purus suscipit a. Ut facilisis nunc elit, quis rhoncus nunc egestas a. Ut vitae dictum massa. Curabitur nec posuere arcu. Aliquam erat volutpat. Mauris non tortor in est commodo commodo nec eget purus. Mauris enim lorem, lacinia sollicitudin libero vel, consectetur congue diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. In pharetra fringilla velit at volutpat.</div>
</div>
</body>
CSS:
body {
margin: 0px;
}
.header {
background: black;
width: 100%;
height: 50px;
position: fixed;
display: none;
}
Jquery:
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$(".header").slideDown();
}
if ($(window).scrollTop() < 100) {
$(".header").slideUp();
}
});
Fiddle:
http://jsfiddle.net/mzz2J/
Try this code:
$(function() {
var bar = $('#headerSlideContainer');
var top = bar.css('top');
$(window).scroll(function() {
if($(this).scrollTop() > 50) {
bar.stop().animate({'top' : '0px'}, 500);
} else {
bar.stop().animate({'top' : top}, 500);
}
});
});
Working Example
Source: http://return-true.com/2010/04/scroll-activated-slide-down-header-with-jquery/