how to call javascript functions on scroll beyond a particular point

how to call javascript functions on scroll beyond a particular point - javascript

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.

Related

How to change an image when hover over text? (Strictly HTML, CSS and JS)

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)

Scroll-snapping breaks jQuery animated scroll

I have a scroll view with mandatory scroll-snapping:
scroll-snap-type: y mandatory;
I also have some buttons which provide shortcuts to the different elements of the scroll view. When a button is clicked, I use jQuery to animate the selected element into view:
$('#scroller').animate({ scrollTop:$('#scroller').scrollTop() + $(element).offset().top -$('#scroller').offset().top }, { duration: 'slow', easing: 'swing'});
This works perfectly in Safari. In Chrome and Firefox (Mac), however, it seems scroll-snapping breaks jQuery's animate function. Instead of a smooth scrolling, the element just awkwardly jerks into view. If I remove the scroll-snapping it works as expected.
I tried to be clever and disable the scroll-snapping whenever a button is clicked, then enable it again on manual mouse wheel scrolling:
$('#scroller').on('wheel', function(e) {
$('#scroller').css('scroll-snap-type', 'y mandatory');
});
This way, I got it to work both in Safari and Firefox. But Chrome still won't play ball. The trick kind of works, but, oddly enough, once or twice only. After clicking a button, it seems it simply ignores to enable the scroll-snapping again.
Any idea how to fix this? Thanks!
Demo: https://codepen.io/gurgel/pen/yLLORar
EDIT: After reading this post I got it working on all browsers using this smoothscroll polyfill. I would still prefer a vanilla solution though – it seems so close.
EDIT 2: Added snippet per suggestion:
$(document).ready(function() {
$('#scroller').on('wheel', function(e) {
/* This gets the scroll-snapping working again in Firefox, but not in Chrome */
$('#scroller').css('scroll-snap-type', 'y mandatory');
});
});
function changeView(index) {
/* Workaround to enable smooth scrolling in Chrome and Firefox */
$('#scroller').css('scroll-snap-type', 'none');
var id = 'view ' + index;
var element = document.getElementById(id);
$('#scroller').animate({ scrollTop: $('#scroller').scrollTop() + $(element).offset().top -$('#scroller').offset().top }, { duration: 'slow', easing: 'swing'});
}
#wrapper {
height:100vh;
width:50vw;
overflow: hidden;
display: flex;
flex-direction:row;
}
#menu ul {
list-style:none;
padding:0 20px 0 0;
cursor: pointer;
width:60px;
}
#menu ul li {
border:1px solid green;
}
#scroller {
flex-grow:1;
overflow-y: scroll;
scroll-snap-type: y mandatory;
/*
This breaks the animated scrolling in Chrome/FF.
*/
}
.view {
padding:10px;
scroll-snap-align: start;
}
/* Irrelevant styling */
.view:nth-child(1) {
background:#b3de81;
}
.view:nth-child(2) {
background:#6eb5c0;
}
.view:nth-child(3) {
background:#E94353;
}
.view:nth-child(4) {
background:#faaf08;
}
.view:nth-child(5) {
background:#CFA4DB;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
<div id="menu">
<ul>
<li onclick="changeView(1)">1</li>
<li onclick="changeView(2)">2</li>
<li onclick="changeView(3)">3</li>
<li onclick="changeView(4)">4</li>
<li onclick="changeView(5)">5</li>
</ul>
</div>
<div id="scroller">
<div id="view 1" class="view">
<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>
<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>
</div>
<div id="view 2" class="view">
<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>
<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>
</div>
<div id="view 3" class="view">
<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>
<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>
</div>
<div id="view 4" class="view">
<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>
<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>
</div>
<div id="view 5" class="view">
<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>
<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>
</div>
</div>
</div>

onclick slideToggle + scrollTo DIV

I have this very simple function that slideToggle() a hidden div and scrolls a div to the top. The slideToggle works ok, the scroll to top doesn't work at all.
Any hints?
My idea is that when the scrollTo function ends then starts the slideToggle one.
$(document).on("click", ".more-about", function() {
$(this).parent().find('.hide').slideToggle(800),
$(this).parent().find('.more').hide(),
$('.whole').scrollTo('#about', 100)
});
.more-about {
cursor: pointer
}
.hide {
color: red;
display: none
}
.whole {
background: #f2f2f2
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="whole">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> "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."<br><br>
<div class="more-about">MORE</div>
<div class="hide">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>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

Updated: $('.whole').scrollTop('#about', 100)
There is no #about in your dom.
$(document).on("click", ".more-about", function() {
$(this).parent().find('.hide').slideToggle(800),
$(this).parent().find('.more').hide(),
$('.whole').scrollTop('#about', 100)
});
.more-about {
cursor: pointer
}
.hide {
color: red;
display: none
}
.whole {
background: #f2f2f2
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="whole">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> "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."<br><br>
<div class="more-about">MORE</div>
<div class="hide">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>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

I believe you want to show the hidden content on click of more and scroll to the position of the new content, here is the bin -- http://jsbin.com/wigojowabu/edit?html,js,console,output
$(document).on("click", ".more-about", function() {
$(this).parent().find('.hide').slideToggle(800);
$(this).hide();
window.scrollTo(0,$('#about').offset().top);
});
I have used window.scrollTo(xpos, ypos) to scroll to the element.

You can use animate() and scrollTop inside for auto scroll in the good section. Please try bellow:
$(document).on("click", ".more-about", function() {
$(this).parent().find('.hide').slideToggle(800)
$(this).parent().find('.more').hide()
$('html').animate( { scrollTop: ($(".whole").scrollTop()+$(".more-about").offset().top) }, 1000 );
});
.more-about {
cursor: pointer
}
.hide {
color: red;
display: none
}
.whole {
background: #f2f2f2
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="whole">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> "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."<br><br>
<div class="more-about">MORE</div>
<div class="hide">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>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

Maintain dimensions when div is fixed

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;
}

Creating a sticky footer

http://codepen.io/RobbyT15/pen/otyfw/
I'm working on a site design, and I'm trying to make a dynamic footer that stays at the bottom of the window regardless of the screen size. Using the fixed attribute in CSS doesn't work as it doesn't scroll with the page. I've done something similar with a floating div, however, when I tried to incorporate it with the footer, it doesn't work. I've looked around at the other similar questions, but each of them say to add the position: fixed CSS rule. Any suggestions?
Edit* I made the changes everyone suggested, however, The footer it not "attaching itself to the bottom of the window. I'm sorry I'm being such a pain with this.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Robert Thompson</title>
<link rel="stylesheet" href="styles/desktop.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="includes/init.js"></script>
<script type="text/javascript" src="includes/main.js"></script>
</head>
<body>
<div id="main">
<header></header>
<div id="content">
<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>
<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>
<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>
<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>
<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>
<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>
<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>
</div>
<footer></footer>
</div>
</body>
</html>
CSS
body{
position: relative;
margin: 0;
padding: 0;
background-color: #757575;
color: #FFFFFF;
z-index: 0;
}
header, footer{
position: relative;
display: block;
width: 100%;
height: 50px;
background-color: #000000;
z-index: 2;
}
header{
border-bottom: 3px inset #DDAA00;
}
footer{
border-top: 3px outset #DDAA00;
}
#main{
position: absolute;
background-color: red;
z-index: 1;
}
#content{
position: relative;
left: 250px;
width: 70%;
z-index: 1;
}

You would need to use position relative, and absolute. So to your container (the body of the page) add position: relative and then to your footer you would add position: absolute no need for margining. Also look into CSS Sticky Footer as TylerH pointed you too.

Take a look at this: http://codepen.io/sheriffderek/pen/ziGbE
It's a combination of the few sticky footer options out there - and some optional javascript to adjust dynamically depending on the footer's actual content (which might be different at different screen sizes)

Develop Reference

JavaScript is the programming language of the Web.

how to call javascript functions on scroll beyond a particular point - javascript

Related

How to change an image when hover over text? (Strictly HTML, CSS and JS)

Scroll-snapping breaks jQuery animated scroll

onclick slideToggle + scrollTo DIV

Maintain dimensions when div is fixed

Creating a sticky footer

Categories

Resources