I need to have 2 footer.The first footer should be fixed as page scrolls, as scroll reaches page end, footer1 should rest/placed before the footer2.
<html>
<head>
<style>
body{
margin: 0;
}
#header{
height: 100px;
background: orange;
}
#body{
height: 10000px;
background: white;
}
#footer1{
height: 100px;
background: darkblue;
}
.footer-sticky{
position: fixed;
bottom: 0;
right: 0;
left: 0;
background: pink;
}
#footer2{
height: 100px;
background: green;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="body"></div>
<div id="footer1" style="position:fixed;bottom: 0;right: 0;left: 0;background: black;height:50px;color:white;">footer1</div>
<div id="footer2" style="">footer2</div>
</body>
</html>
Program includes 2 footer.The first footer should be fixed as page scrolls, as scroll reaches page end, footer1 should rest/placed before the footer2.
Here's jsfiddle link
http://jsfiddle.net/dLe5cv4j/
add position: relative; to the body and insert this javascript at the end (or inside the page load event)
var f1 = document.getElementById("footer1");
var f2 = document.getElementById("footer2");
window.addEventListener("scroll", function(){
if (document.body.scrollTop + window.innerHeight >
document.body.scrollHeight - f2.clientHeight ) {
f1.style.position = "absolute";
f1.style.bottom = f2.clientHeight+"px";
}
else{
f1.style.position = "fixed";
f1.style.bottom = "0px";
}
});
Result: http://jsfiddle.net/Lkuy0ext/
Add in your styles may work you
#footer1
{
z-index: 1;
}
#footer2
{
position: relative;
z-index: 2;
}
#footer1{
margin-bottom:100px;
height: 100px;
background: darkblue;
}
edit and try.
Related
Hey I have an inline javascript code that adds a class to an element and makes it slide up in the screen. But it suddenly stopped working and I don't know why. Here's the HTMl and JS:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 400) {
$(".converter").addClass("atcbottomactive");
} else {
$(".converter").removeClass("atcbottomactive");
}
});
.converter {
position: fixed;
height: 60px;
width: 100%;
bottom: -200;
background: #eeeeee;
transition: 1s;
z-index: 10000;
}
.ccontent {
display: inline-flex;
width: 100%;
padding: 10px 5%;
}
.atcbottomactive{
bottom:0;
transition: 1s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="background: green; height: 1500px; width: 100%;"></div>
<div class="converter"><div class="ccontent">...</div></div>
Here's the link
Thanks in advance :)
In fact, trying to use it without including JQuery gives you the error. You can solve this easily with "JavaScript" without using jQuery.
var element = document.querySelector(".converter");
window.addEventListener('scroll', function() {
var scroll = window.pageYOffset || document.documentElement.scrollTop;
if (scroll >= 400) {
element.classList.add("atcbottomactive");
} else {
element.classList.remove("atcbottomactive");
}
});
.converter {
padding: 20px 20px 200%;
background: blue;
color: white;
}
.converter.atcbottomactive {
background: green;
}
<div class="converter">
<div class="ccontent">Scroll me: 400px</div>
</div>
Hello everyone here i am trying to show progress bar for my website but i ma facing problem of not display background-color on scroll, please help on this also find the code at below starting from html, css and jquery ...
HTML Code
<div class="progress-bar-container"><div id="progressbar" value="0"></div></div>
CSS Code
height: 5px;
background-color: #ced4da;
overflow: hidden;
width: 100%;
position: sticky;
position: -webkit-sticky;
top: 48px;
z-index: 440;
}
.progress-bar-container #progressbar {
background-color: #4688f1;
height: 100%;
width: 0;
}
jQuery Code
$(window).scroll(function () {
var s = $(document).scrollTop(),
d = $(document).height() - $(window).height();
$("#progressbar").attr('max', d);
$("#progressbar").attr('value', s);
});
});
Here please guide how i can display backgroud-color on scroll. Thanks in Advance!!
There are a couple of issues with your code, HTML width attribute does not support div element. Also, the value attribute is not supported by div either. For creating the progress bar you could use CSS. Instead of updating $("#progressbar").attr('value', s); value just update the width of the element $("#progressbar").width(s);
Here is the complete working example -
$(window).scroll(function () {
var s = $(document).scrollTop(),
d = $(document).height() - $(window).height();
$("#progressbar").width(s);
});
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
.progress-bar-container{
height: 5px;
background-color: #ced4da;
overflow: hidden;
width: 100%;
position: sticky;
position: -webkit-sticky;
top: 48px;
z-index: 440;
}
.progress-bar-container #progressbar {
background-color: #4688f1;
height: 100%;
width: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="progress-bar-container"><div id="progressbar"></div></div>
<div style="height: 120vh"></div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>
You should calculate the procentage and set it as width for `progressbar``
have a look.
$(window).scroll(function () {
var d = $(document).height() - $(window).height(),
s = $(document).scrollTop();
var width= (s / d) * 100 // in Procent
$("#progressbar").attr('max', d);
$("#progressbar").attr('value',s).css("width",width +"%");
});
body{
height: 1000px;
}
.progress-bar-container{
height: 5px;
background-color: #ced4da;
overflow: hidden;
width: 100%;
position: sticky;
position: -webkit-sticky;
top: 48px;
z-index: 440;
}
.progress-bar-container #progressbar {
background-color: #4688f1;
height: 100%;
width: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="progress-bar-container">
<div id="progressbar" value="0"></div>
</div>
I horizontally split a page of the browser with two divs, and I want to increase the height of a div and reduce it in the other using the mouse position on the y axis. It would enlarge the first div when I'm in the upper part of the page and enlarge the second one when I'm at the bottom, but keeping both divs sum height equal to the height of the page.
This is my code
<html><head>
<meta charset="UTF-8">
<style>
*{
margin: 0 auto;
}
#container{
height: 100vh
}
#alto{
width: 100vw;
height: 50vh;
background-color: mediumpurple;
}
#basso{
width: 100vw;
height: 50vh;
background-color: royalblue;
}
</style>
</head>
<body>
<div id="alto" onMousemove="myFunction()" ></div>
<div id="basso" ></div>
<script>
function myFunction() {
var y = event.clientY + "px";
document.getElementById("basso").style.height = y ;
}
</script>
</body>
</html>
Take a look at this.
var section1 = document.getElementById("section1");
var section2 = document.getElementById("section2");
document.onmousemove = function(event) {
section1.style.height = event.clientY + 'px';
section2.style.height = "calc(100% - "+ event.clientY + 'px';
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
background: gray;
height: 100vh;
}
#section1, #section2{
height: 50%;
transition: all 0.1s;
}
#section1{
background: hotpink;
}
#section2{
background: pink;
}
<div class="container">
<div id="section1"></div>
<div id="section2"></div>
</div>
You can achieve a simpler version of this effect (ie. without constantly changing heights relative to the mouse position) with CSS alone.
Working Example:
body {
margin: 0;
padding: 0;
}
div {
width: 100vw;
height: 50vh;
margin: 0 auto;
transition: height 0.3s linear;
}
div:hover {
height: 80vh;
}
body:not(:hover) div {
height: 50vh;
}
div:not(:hover) {
height: 20vh;
}
.alto {
background-color: mediumpurple;
}
.basso {
background-color: royalblue;
}
<div class="alto"></div>
<div class="basso" ></div>
How can it be made so that a div scrolls with the page but only in a certain area of the page?
I can't work out how to do this with CSS for only part of the page, I think javascript may be the only option.
For e.g. There's three sections of a page, Top, Middle and Bottom.
There's a right floated div which should scroll with the user in the middle section and stop scrolling to be 'left in place' at the top of the middle section as well as the bottom of the middle section.
#Top {
background-color: grey;
width: 100%;
height: 400px;
}
#Middle {
background-color: green;
width: 100%;
height: 800px;
}
#Bottom {
background-color: blue;
width: 100%;
height: 400px;
}
#scrolling-section {
background-color: yellow;
width: 30%;
height: 150px;
float: right;
}
<div id="Top">
</div>
<div id="Middle">
<div id="scrolling-section">
This box should scroll along the green section but 'cut-off' and stop scrolling at the top and bottom of the green section
</div>
</div>
<div id="Bottom">
</div>
JSFiddle: fiddle
So here you have solution using jquery:
Listen to the scroll event and calculate how much the scrolling-section goes outside the Middle section while scrolling up / down.
Added position: relative to the scrolling-section.
Adjust the position of the scrolling-section accordingly.
$(document).scroll(function() {
var wrapper = $('#Middle');
var box = $('#scrolling-section');
var offsetTop = - wrapper.offset().top + $(window).scrollTop();
var offsetBottom = wrapper.offset().top - $(window).scrollTop() + wrapper.outerHeight() - box.outerHeight();
if (offsetBottom > 0 && offsetTop < 0) {
box.css({
'top': 0
});
} else if (offsetBottom > 0 && offsetTop > 0) {
box.css({
'top': offsetTop + 'px'
});
} else {
box.offset({
'top': $(window).scrollTop() + offsetBottom
});
}
});
#Top {
background-color: grey;
width: 100%;
height: 400px;
}
#Middle {
background-color: green;
width: 100%;
height: 800px;
}
#Bottom {
background-color: blue;
width: 100%;
height: 400px;
}
#scrolling-section {
position: relative;
background-color: yellow;
width: 30%;
height: 150px;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Top">
</div>
<div id="Middle">
<div id="scrolling-section">
This box should scroll along the green section but 'cut-off' and stop scrolling at the top and bottom of the green section
</div>
</div>
<div id="Bottom">
</div>
Let me know your feedback on this. Thanks!
Some Javascript is needed in order to read the point where you want to change the state of the div you wish to address. You can do this with the getBoundingClientRect() method. I have worked out a fiddle that will show you.
What happens is that you read the position of #Middle. I have added an input field that shows you the value. The change will be when the position hits zero. You then change the CSS properties of the #scrolling-section.
You will see some added readings of the element to ensure that it can be positioned in place and will keep its original width;
var scrollposition = document.getElementById("Middle");
var scrollsection = document.getElementById("scrolling-section");
var scrollsection_offsetLeft = scrollsection.offsetLeft;
var scrollsection_width = scrollsection.offsetWidth;
var valy = document.getElementById("posy");
window.addEventListener("scroll", function(event) {
valy.value = scrollposition.getBoundingClientRect().y || scrollposition.getBoundingClientRect().top;
if (valy.value <= 0) {
scrollsection.style.position = "fixed";
scrollsection.style.top = "0px";
scrollsection.style.left = scrollsection_offsetLeft + "px";
scrollsection.style.width = scrollsection_width + "px";
} else {
scrollsection.style.position = "static";
scrollsection.style.top = "auto";
scrollsection.style.left = "auto";
}
}, false)
#posy {
position: fixed;
top: 0;
}
#Top {
background-color: grey;
width: 100%;
height: 400px;
}
#Middle {
background-color: green;
width: 100%;
height: 800px;
}
#Bottom {
background-color: blue;
width: 100%;
height: 400px;
}
#scrolling-section {
background-color: yellow;
width: 30%;
height: 150px;
float: right;
}
<input type="text" id="posy" />
<div id="Top">
</div>
<div id="Middle">
<div id="scrolling-section">
This box should scroll along the green section but 'cut-off' and stop scrolling at the top and bottom of the green section
</div>
</div>
<div id="Bottom">
</div>
I'm on my mobile but if you add
#scrolling-section {
position: fixed;
background-color: yellow;
width: 30%;
height: 150px;
right: 8px;
}
This will scroll with the page but really there will need to be an event listener that will trigger when #scrolling-section appears on the screen possibly adding the attribute position:fixed; then another event listener when the #bottom appears calculates the size of #middle set margin-top & position:absolute; hope this helps point in the right direction.
I have a fixed header and menu bar and there is a container div when i scroll down the container div does not hide itself below the menu bar as shown in image below is the jquery code i am using. Please help to solve my issue.
var header= $('.header');
var start_div = $(header).offset().top;
var menu_div = $('.menu');
var menu = $(menu_div ).offset().top;
$.event.add(window, "scroll", function() {
var p = $(window).scrollTop();
$(header).css('position',((p)>start_div ) ? 'fixed' : 'static');
$(header).css('top',((p)>start_div ) ? '0px' : '');
$(header).css('width','840px');
$(header).css('min-height','108px');
});
$.event.add(window, "scroll", function() {
var p = $(window).scrollTop()+100;
$(menu_div).css('position',((p)>menu) ? 'fixed' : 'static');
$(menu_div).css('top',((p)>menu) ? '110px' : '');
$(menu_div).css('width','575px');
$(menu_div).css('height','57px');
});
Unless I'm missing something you don't need jQuery or even JS to do that.
Check the snippet (codePen here)
html,
body {
width: 100%;
height: 100%;
background-color: white;
}
.header-wrapper {
top: 0;
right: 0;
left: 0;
position: fixed;
height: 160px;
background-color: white;
}
.header {
background-color: cyan;
height: 100px;
width: 100%;
}
.menu {
width: 100%;
height: 50px;
background-color: green;
margin-top: 10px;
}
.content {
color: #fff;
background-color: black;
margin-top: 170px; /* same as height of header + nav + margins + 10px for coolness*/
}
<body>
<div class="header-wrapper">
<div class="header">Blue Header</div>
<div class="menu">Green Menu</div>
</div>
<div class="content">
My content<br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
blabla
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
blabla
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>
Use the css z-index property.
.header, .menu {
z-index: 2
}
.container {
z-index: 1
}
http://www.w3schools.com/cssref/pr_pos_z-index.asp