Context:
I have a subtitle "About me" that animates with the library animejs as soon as it comes into view in the screen (every time). You can find the animation here, i got it from Tobia's Moving Letters.
The problem:
As I scroll down to the subtitle, I'm able to see it right before the animation plays. So in other words: I scroll down, I read the subtitle "About me" and then it disappears just to have the letter pop in one by one.
This isn't want, I am looking for a way to have the initial text "About me" hidden and then have each animated letter appear
I made a snippet with the subtitle under some dummy text so it can be scrolled into.
// Wrap every letter in a span
var textWrapper = document.querySelector('.subtitle .ml6 .letters');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
const subtitle_animation = anime({
targets: '.subtitle .ml6 .letter',
translateY: ["1.1em", 0],
translateZ: 0,
duration: 750,
delay: (el, i) => 100 * i + 500
})
function isInViewport(el) {
const rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
const aboutme = document.getElementById('about-me');
let aboutme_vis = false
let ready_to_play = true
document.addEventListener('scroll', function () {
isInViewport(aboutme) ? aboutme_vis = true : aboutme_vis = false;
if (aboutme_vis && ready_to_play) {
subtitle_animation.restart();
ready_to_play = false
}
if (!aboutme_vis){
ready_to_play = true
}
});
/* Subtitle Animation */
.subtitle .ml6 {
position: relative;
font-size: 1em;
}
.ml6 .text-wrapper-subtitle {
position: relative;
display: inline-block;
padding-right: 10%;
overflow: hidden;
}
.ml6 .letter {
display: inline-block;
line-height: 1em;
transform-origin: 0 0;
}
<div class="">
<h1>Title</h1>
<p>The subtitle About me can be found below! </p>
<h2>Random text so its possible to scroll: </h2>
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<p>
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<p>
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<p>
</div>
<div class="row main-margin" id="about-me">
<h1 class="subtitle">
<span class="ml6">
<span class="text-wrapper-subtitle">
<span class="letters">About me</span>
</span>
</span>
</h1>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
As a bonus, I would like a way to hide the text again every time it is scrolled out of screen.
This is my first StackOverflow question! I hope anyone can help me 😬
So there's most likely a better solution than this out there to be honest. But that's a quick way I found to get near to what you want. The problem with this is, that if it's in the viewport from the beginning and no scrolling occurs it will never show. You'll have to handle that.Using an IntersectionObserver would probably be a better fit for your case here.
// Wrap every letter in a span
var textWrapper = document.querySelector('.subtitle .ml6 .letters');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
const subtitle_animation = anime({
targets: '.subtitle .ml6 .letter',
translateY: ["1.1em", 0],
translateZ: 0,
duration: 750,
delay: (el, i) => 100 * i + 500
})
function isInViewport(el) {
const rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
const aboutme = document.getElementById('about-me');
let aboutme_vis = false
let ready_to_play = true
document.addEventListener('scroll', function () {
isInViewport(aboutme) ? aboutme_vis = true : aboutme_vis = false;
if (aboutme_vis && ready_to_play) {
subtitle_animation.restart();
setTimeout( () => {
aboutme.style.visibility = "visible";
} );
ready_to_play = false
}
if (!aboutme_vis){
aboutme.style.visibility = "hidden";
ready_to_play = true
}
});
/* Subtitle Animation */
.subtitle .ml6 {
position: relative;
font-size: 1em;
}
.ml6 .text-wrapper-subtitle {
position: relative;
display: inline-block;
padding-right: 10%;
overflow: hidden;
}
.ml6 .letter {
display: inline-block;
line-height: 1em;
transform-origin: 0 0;
}
#about-me {
visibility: hidden;
}
<div class="">
<h1>Title</h1>
<p>The subtitle About me can be found below! </p>
<h2>Random text so its possible to scroll: </h2>
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<p>
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<p>
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<p>
</div>
<div class="row main-margin" id="about-me">
<h1 class="subtitle">
<span class="ml6">
<span class="text-wrapper-subtitle">
<span class="letters">About me</span>
</span>
</span>
</h1>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
Related
When an (x) amount of images are located next to (x) different paragraphs, how do I change the image when to a different image entirely when hovering over different paragraphs, as seen on dart.dev by google?
Depending on exactly what the use case is, you can do this without Javascript.
In this snippet the paragraphs and the space for the image are within the same container and then when hovering over a paragraph its associated image is shown as a background image to its before pseudo element which is positioned at the (communal) image position.
body {
overflow-y: hidden;
}
.container {
position: relative;
width: 100%;
}
.container .image, .container p:hover::before {
width: 45%;
height: 100%;
}
.container .image {
display: inline-block;
}
.container div.pwrapper {
width: 45%;
height: 100vh;
display: inline-block;
overflow-y: auto;
}
.container p:hover::before {
position: absolute;
top: 0;
left: 0;
content: '';
background-image: var(--bg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat no-repeat;
}
.container p:nth-child(1) {
--bg: url(https://picsum.photos/id/1015/1024/384.jpg);
}
.container p:nth-child(2) {
--bg: url(https://picsum.photos/id/1016/1024/384.jpg);
}
.container p:nth-child(3):hover {
--bg: url(https://picsum.photos/id/1018/1024/384.jpg);
}
.container p:nth-child(4) {
--bg: url(https://picsum.photos/id/1019/1024/384.jpg);
}
.container p:nth-child(5) {
--bg: url(https://picsum.photos/id/1024/1024/384.jpg);
}
<div class="container">
<div class="image"></div>
<div class="pwrapper">
<p>First paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Second paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Third paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
<p>Fourth paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Fifth paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
This is indeed done using javascript as evidenced by it not working when you turn off javascript. What you'll want to do is have an img tag and use the javascript mouseover event. You could do something like this:
let img = document.getElementById("img-1");
let link1 = document.getElementById("link-1");
link1.addEventListener('mouseover', () => img.src = 'img1.png');
let link2 = document.getElementById("link-2");
link2.addEventListener('mouseover', () => img.src = 'img2.png');
... (Might want to use a loop)
I'm working on a website with some kind of a JavaScript "input" tabs. Let say user type "running" in input and press submit than application display some quote about running, but when user type something that is not exist in predefined dataset (data-name) than application display generic content.
Everything is working except generic content(class="generic").
How can I add generic content when input value is not existing in dataset values in the app section.
You can try in this fiddle: http://jsfiddle.net/e10nLbg2/1/
Here is my code:
.data, .generic {
visibility: hidden;
opacity: 0;
background: blue;
padding: 50px;
color: white;
transition: opacity 1s ease;
position: absolute;
}
.active {
visibility: visible;
opacity: 1;
}
<input type="text" class="input">
<input type="submit" class="submit" value="SUBMIT">
<section class="app">
<div class="data" data-name="running">RUNNING - Lorem ipsum dolor sit...
</div>
<div class="data" data-name="walking">WALKING - Lorem ipsum dolor
sit...
</div>
<div class="generic">GENERIC - Lorem ipsum dolor sit...
</div>
</section>
var submit = document.querySelector('.submit');
submit.onclick = function(){
var input = document.querySelector('.input').value;
var e = input.toLowerCase();
var element = document.querySelector('[data-name="'+ e +'"]');
var generic = document.querySelector('.generic');
var active = document.querySelector('.active');
if(active){
active.classList.remove('active');
//generic.classList.add('active');
}else{
//generic.classList.remove('active');
}
element.classList.add('active');
}
On submit event you need to remove .active from active element and generic one as well, then set active the one that fits user input, else - set active generic:
var submit = document.querySelector('.submit');
submit.onclick = function() {
let e = document.querySelector('.input').value.toLowerCase();
let element = document.querySelector('[data-name="'+ e +'"]');
let generic = document.querySelector('.generic');
let active = document.querySelector('.active');
if (active) active.classList.remove('active');
generic.classList.remove('active');
if (element)
element.classList.add('active');
else
generic.classList.add('active');
}
.data, .generic {
visibility: hidden;
opacity: 0;
background: blue;
padding: 50px;
color: white;
transition: opacity 1s ease;
position: absolute;
}
.active {
visibility: visible;
opacity: 1;
}
input {
height: 30px;
border-radius: 5px;
box-sizing: border-box;
outline: none;
}
input[type="text"] {
background: #e6e6e6;
color: grey;
outline: none;
padding: 15px;
border: 0;
}
<input type="text" class="input">
<input type="submit" class="submit" value="SUBMIT">
<div class="data" data-name="running">RUNNING - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="data" data-name="playing">PLAYING - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="data" data-name="dancing">DANCING - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="data" data-name="walking">WALKING - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="generic">GENERIC - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
I am using GSAP for animation, I need on scroll animation when the user scrolls the mouse wheel. Now animation is working on page load. I need content should animate on the scroll. First two articles are working but when I scroll it than animation is not working.
(function() {
var content = document.getElementById("content");
var xScroll = 0; // initialize
function scrollHorizontally(e) {
xScroll = xScroll+e.deltaY*20;
// set limits to avoid overshooting and stucking at beginning or end
var max = document.getElementById("content").innerWidth;
if (xScroll <= 0) {
xScroll = 0;
} else if (xScroll >= max) {
xScroll = max; //replace with the width of the scrollable container
}
// scroll smooth to xScroll
TweenLite.to(content, 1, { ease: Power1.easeOut, scrollTo:{x:xScroll} });
var rt = ($(window).width() - ($(".active_05").offset().left ));
if(rt>200)
{
$(".about_menu").addClass("active");
}
else
{
$(".about_menu").removeClass("active");
}
e.preventDefault();
}
if (content.addEventListener) {
// Standard
content.addEventListener("wheel", scrollHorizontally, false);
} else {
// IE 6/7/8
content.attachEvent("onmousewheel", scrollHorizontally);
}
var article_1=document.getElementById("article_1");
TweenLite.from(article_1, .5, { ease: Power0.easeOut, y: 10 });
var article_2=document.getElementById("article_2");
TweenLite.from(article_2, .5, { ease: Power0.easeOut, y: 10 });
var article_3=document.getElementById("article_3");
TweenLite.from(article_3, .5, { ease: Power0.easeOut, y: 15 });
var article_3=document.getElementById("article_4");
TweenLite.from(article_3, .5, { ease: Power0.easeOut, y: 15 });
var article_3=document.getElementById("article_5");
TweenLite.from(article_3, .5, { ease: Power0.easeOut, y: 15 });
})();
#content {
position:fixed;
display: inline-block;
overflow-x: scroll;
width: 100%;
overflow-y: hidden;
top: 0;
right:0;
height: 100%;
}
#content #horizontal_scroll{
overflow: hidden;
width:400%;/*to increase the width */
}
#horizontal_scroll .full_screen_100
{
height: 100%;
background-color: #fff;
display: flex;
}
#horizontal_scroll .full_screen_100 article{
width: 900px;
height: 100%;
float:left;
border-left: solid 1px #E2E2E2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/plugins/ScrollToPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenLite.min.js"></script>
<div id="content">
<div id="horizontal_scroll" id="scroll_container">
<div class="full_screen_100">
<article>
<p id="article_1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</article>
<article>
<p id="article_2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
<p id="article_3">consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
<article>
<p id="article_4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
<p id="article_5">consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
</div>
</div>
</div>
use GSAP with scrollmagic.Check this examples Gsap with scroll animation
I have a div that will become fixed temporarily as then user scrolls down the page. This div has its width set to 100% so that it completely fills up its parent and so that it is responsive.
When the div becomes fixed it's width changes from 100% of its parents width to 100% of the viewport width.
How can I maintain the div's width when it becomes fixed? Note I cant just set its width to a pixel value because the screen/viewport/browser window may become resized.
$(document).ready(function () {
var CONTAINER = $("#container");
var FIXED_SLIDE = $('.fixed-slide').first();
var CONTAINER_TOP = CONTAINER.offset().top;
var CONTAINER_HEIGHT = CONTAINER.height();
var FIXED_HEIGHT = FIXED_SLIDE.height();
var MAX_Y_POS = CONTAINER_TOP + CONTAINER_HEIGHT - FIXED_HEIGHT;
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
if (scrollTop < CONTAINER.offset().top) {
FIXED_SLIDE.css('position', 'relative');
}
else if (scrollTop > MAX_Y_POS) {
FIXED_SLIDE.css('position', 'relative');
}
else FIXED_SLIDE.css('position', 'fixed').css('top', '0px');
});
});
#container {
position: relative;
width: 250px;
height: 1500px;
background-color: #ddd;
}
.fixed-slide {
position: relative;
width: 100%;
height: 500px;
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<!-- We only have control over changing this div and its children.
All other elements on the page we cannot edit or change -->
<div id="container">
<div class="fixed-slide">
<p>When I touch the top of the viewport I am fixed. How can I maintain my dimensions when fixed?</p>
</div>
</div>
<!-- Lots of Static main page content here. If I were to make .fixed-slide fixed this content would now popup
and appear underneath the header content - naughty - not to mention that .fixed-slides dimensions
will change. Thus the need for margin-top instead -->
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
$(document).ready(function () {
var CONTAINER = $("#container");
var FIXED_SLIDE = $('.fixed-slide').first();
var CONTAINER_TOP = CONTAINER.offset().top;
var CONTAINER_HEIGHT = CONTAINER.height();
var FIXED_HEIGHT = FIXED_SLIDE.height();
var MAX_Y_POS = CONTAINER_TOP + CONTAINER_HEIGHT - FIXED_HEIGHT;
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
if (scrollTop < CONTAINER.offset().top) {
FIXED_SLIDE.css('position', 'relative');
}
else if (scrollTop > MAX_Y_POS) {
FIXED_SLIDE.css('position', 'relative');
}
else FIXED_SLIDE.css('position', 'fixed').css('top', '0px');
});
});
anytime you can get actual size of window by the methods: .clientWidth, .clientHeight
You can set it to a pixel value if you update on window resize, which is an event you can listen for.
Here is a JS Fiddle demonstrating resizing the div pixel value based on the window changing:
https://jsfiddle.net/7j6w9ghe/
JavaScript:
$(function () {
var div = $('#MrFixed');
adjustSize(div);
$(window).resize(function () {
adjustSize(div);
});
function adjustSize(div) {
div.width(div.parent().width());
}
});
Html:
<section>
<article>
<div id="MrFixed">
<p>I'm fixed. Resize page I will too.</p>
</div>
</article>
</section>
Css:
section {
width:100%
}
article {
border:1px solid black;
height:3000px;
width:75%;
}
div {
background-color:red;
height:200px;
width:100%;
position:fixed;
}
div p {
color:white;
}
I am new to JavaScript and tried a simple code (in pure JavaScript)
I made a code to make an invisible block of text ( display:none; ) to be made visible ( display:block; ) when the user scrolls past a point, say 300px.
Here is my complete code
<!DOCTYPE html>
<html>
<head>
<style>
body{
position: absolute;
}
p{
margin-top: 300px;
margin-left: 50%;
display: none;
}
</style>
<script type="text/javascript">
onscroll = function() {
if (scrollTop > 400) {
getElementById('p').style.cssText ="display:block;";
} else {
if {
getElementById('p').style.cssText ="display:none;";
}
}
};
</script>
</head>
<body>
<p id="p">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</body>
</html>
window.onscroll = function() {
if (window.scrollY > 400) {
document.getElementById('p').style.cssText ="display:block;";
} else {
document.getElementById('p').style.cssText ="display:none;";
}};
i have removed empty if block ,it was without condition
scrollTop is not there in DOM API its scrollY
for best cross browser solution ;use jquery scrollTop function
Fiddle demo
JQuery
$(document).scroll(function(){
if($("body").scrollTop()>=200)
{
$("#p2").css("display", "block");
}
})
HTML
<p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p id="p2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
CSS
body {
position: absolute;
}
p
{
line-height:90px;
background-color:yellow;
}
p#p2 {
display: none;
background-color:orange;
}
Here the 2nd <p> element is by default hidden and when body scrolls down 200 px it comes in display.