I am using jquery scrollbar plugin for my website. Everything is working good. But when I resize window in mozilla and make scroll div and resize again its looks uneven scrollbar.
How to make the custom scrollbar will be visible if the browser resize also.
script I have tried:
$('.scroll-lmenu').scrollbar({
autoUpdate :true,
autoScrollSize: true
});
$(document).ready(function(){
$('.scrollbar-inner').scrollbar();
});
.scrollbar-inner {
max-height: 300px;
overflow: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://gromo.github.io/jquery.scrollbar/jquery.scrollbar.js"></script>
<link href="https://gromo.github.io/jquery.scrollbar/jquery.scrollbar.css" rel="stylesheet"/>
<div class="scrollbar-inner">
<p class="permanent">
Simple inner scrollbar over content
</p>
<p class="permanent">
Click to test #anchors<br><br>
<input type="text" value="Use TAB to focus next input" style="max-width:220px; width: 100%;">
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
viverra nisi, in interdum massa nibh nec erat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
viverra nisi, in interdum massa nibh nec erat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
viverra nisi, in interdum massa nibh nec erat.
</p>
<input type="text"><br>
<h3 id="anchor">Anchor</h3>
</div>
Mozilla does have some extensions for manipulating the scroll-bars but they are all recommended not to be used.
-moz-scrollbars-none They recommend using overflow:hidden in place of this.
-moz-scrollbars-horizontal Similar to overflow-x
-moz-scrollbars-vertical Similar to overflow-y
-moz-hidden-unscrollable Only works internally within a users profile settings. Disables scrolling XML root elements and disables using arrow keys and mouse wheel to scroll web pages.
Mozilla Developer Docs on 'Overflow'
Further details about Mozilla
This is not really useful as far as I know, but it's worth noting that the attribute which controls whether or not scrollbars are displayed in Firefox is: (reference link)
Attribute: scrollbars
Type: nsIDOMBarProp
Description: The object that controls whether or not scrollbars are shown in the window. This attribute is "replaceable" in JavaScript. Read only
Last but not least, padding is like magic.
As has been previously mentioned in some other answers, here is an illustration which is sufficiently self-explanatory
That was you body's scroll bar disable the body's overflow-y.
$(document).ready(function(){
$('.scrollbar-inner').scrollbar();
});
.scrollbar-inner {
max-height: 300px;
overflow: auto;
}
body{
overflow:hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://gromo.github.io/jquery.scrollbar/jquery.scrollbar.js"></script>
<link href="https://gromo.github.io/jquery.scrollbar/jquery.scrollbar.css" rel="stylesheet"/>
<div class="scrollbar-inner">
<p class="permanent">
Simple inner scrollbar over content
</p>
<p class="permanent">
Click to test #anchors<br><br>
<input type="text" value="Use TAB to focus next input" style="max-width:220px; width: 100%;">
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
viverra nisi, in interdum massa nibh nec erat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
viverra nisi, in interdum massa nibh nec erat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
viverra nisi, in interdum massa nibh nec erat.
</p>
<input type="text"><br>
<h3 id="anchor">Anchor</h3>
</div>
Use overflow-x: scroll and overflow-y: hidden, or overflow: hidden scroll instead.
Link To developer.mozilla.org
You can add max-height:100vh and remove body margin margin:0
$(document).ready(function() {
$('.scrollbar-inner').scrollbar();
});
body {
margin: 0
}
.scrollbar-inner {
max-height: 100vh;
overflow: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://gromo.github.io/jquery.scrollbar/jquery.scrollbar.js"></script>
<link href="https://gromo.github.io/jquery.scrollbar/jquery.scrollbar.css" rel="stylesheet" />
<div class="scrollbar-inner">
<p class="permanent">
Simple inner scrollbar over content
</p>
<p class="permanent">
Click to test #anchors<br><br>
<input type="text" value="Use TAB to focus next input" style="max-width:220px; width: 100%;">
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis,
turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue
lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa
nibh nec erat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis,
turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue
lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa
nibh nec erat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis,
turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue
lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa
nibh nec erat.
</p>
<input type="text"><br>
<h3 id="anchor">Anchor</h3>
</div>
body {
margin: 0
}
.scrollbar-inner {
max-height: 100vh;
overflow: overflow-x ;
}
You can directly hide the scroll bar by
.scrollbar-inner > .scroll-element{ display:none;}
Try not Using
$(document).ready(function(){
$('.scrollbar-inner').scrollbar();
});
https://codepen.io/sheetalsinghwd/pen/povoYbv
like this
try adding the following to document ready
$(".scrollbar-inner").hover(function() {
$("body").css("overflowY", "hidden");
});
$(".scrollbar-inner").mouseleave(function() {
$("body").css("overflowY", "auto");
});
Related
How to I make a Design a scrollbar using html, css or javascript?
What I dont want
I dont want to edit the current the scrollbar for my browser.
What I do Want
I want to make my own scrollbar for my companies website.
https://keenthemes.com/metronic/preview/?demo=demo4
"Code"
I dont know how to even start building this but ill do my best!
Html
.Stack_main-section {
height: 40rem;
border: .1rem solid lightgray;
/* flex display so the content is full height */
display: flex;
}
.Stack_content {
padding: .7remabove
}
.Stack_bar-track {
background: lightgray;
padding: .4rem;
}
.Stack_bar {
height: .4rem;
width: .7rem;
height: 9rem;
border-radius: .8rem;
background: gray;
}
<section class="Stack_main-section">
<div class="Stack_content ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac turpis at massa consectetur malesuada vel eu lorem. Vivamus ac eros id ex hendrerit rutrum eget et turpis. Nunc mollis diam id purus porttitor eleifend a interdum neque. Quisque et molestie
enim, eu dignissim nunc. Suspendisse varius mauris eu aliquet rutrum. Maecenas convallis tincidunt tellus, nec tincidunt tellus venenatis at. Quisque eget lacinia magna, ac placerat justo. Donec cursus elementum massa, id posuere lacus posuere eget.
Nunc at dui sodales, varius erat vel, varius lorem. Pellentesque cursus iaculis felis, auctor ultrices ligula elementum vel. Maecenas est dui, ullamcorper ut semper vel, tincidunt sit amet tellus. Nunc ornare ornare sapien in condimentum. Morbi porttitor
feugiat ligula, sit amet feugiat tellus maximus eget. Sed lobortis semper urna, in accumsan ipsum. Aenean dictum dui non dui vehicula porta. Vivamus pellentesque ligula eu egestas facilisis. Pellentesque vitae turpis consectetur lorem laoreet auctor.
Nunc ultrices pellentesque mi, nec lobortis neque facilisis id. Quisque pharetra vitae nibh eu venenatis. Cras pretium convallis cursus. Phasellus quis ex nisi. Nulla et laoreet eros, ac laoreet ante. Maecenas ornare risus a pellentesque varius. Sed
tristique tellus quam, sed volutpat ex sodales quis. Phasellus congue velit a nisl consequat, at tincidunt mi gravida. Morbi sit amet magna a sapien varius accumsan. Phasellus scelerisque, urna faucibus placerat venenatis, dui est fermentum massa,
non lacinia arcu sem in orci. Ut elementum massa et turpis aliquam varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut elementum augue. Sed pulvinar eleifend cursus. Donec id mi odio. Ut nec nibh malesuada, aliquet velit nec,
tincidunt mauris. Mauris sagittis placerat enim, at faucibus turpis vestibulum vel. Pellentesque at venenatis mauris, lacinia blandit dolor. Integer massa sem, elementum a nulla quis, rutrum euismod felis. Cras a lacinia urna. Nulla scelerisque venenatis
lectus ut ullamcorper. Curabitur eu suscipit metus. Praesent velit elit, luctus a facilisis nec, tempus non diam. Fusce nec aliquam est. Maecenas odio odio, pulvinar vel volutpat et, ullamcorper a ligula. Fusce bibendum lacus in est ultrices, vitae
mattis mauris sodales. Curabitur massa nisl, placerat a nunc a, scelerisque rhoncus dui. Vestibulum nibh dui, dictum et porta vel, hendrerit et augue. Morbi viverra est vel sapien venenatis faucibus. Nullam iaculis congue quam. Vestibulum dignissim
iaculis nulla, congue tincidunt nisi iaculis vitae. Fusce mollis aliquam ante, a sagittis dolor mattis id. Morbi aliquam sem nunc, at dictum sem aliquam ac. Suspendisse molestie justo leo, at venenatis mauris aliquam eu. Nunc id tortor malesuada diam
consectetur dapibus sit amet a lorem. Pellentesque dictum et libero vitae semper. Donec sit amet ipsum vel nulla eleifend fringilla ac at velit. Donec consectetur aliquam metus. Integer eget ex et velit imperdiet pulvinar. Duis nisi ante, finibus
eu posuere id, sodales vel sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui ex, placerat eu felis a, luctus ultricies nibh. Nam malesuada viverra facilisis. Nam rhoncus elit velit, at ullamcorper nisi viverra scelerisque. Pellentesque
et lacus non dolor fermentum fermentum. Morbi in vulputate nunc, sit amet malesuada massa. Nullam euismod dui id egestas scelerisque. Donec vel ex ut justo mollis varius. Quisque at tortor nec est cursus iaculis. Vivamus gravida purus a ligula elementum
dictum. Mauris diam dolor, convallis quis imperdiet et, maximus quis leo. Morbi aliquam pretium lectus ac hendrerit.t
</div>
<div class="Stack_bar-track">
<div class="Stack_bar">
.
</div>
</div>
</section>
!important
That just an example of what I wnat I know if this is you you build it professionally.
Please help and Thank you in advance.
Here is a simple example of what you can do with -webkit-scrollbar
.Stack_main-section {
height: 40rem;
border: .1rem solid lightgray;
/* flex display so the content is full height */
display: flex;
}
.Stack_content {
padding: .7remabove
}
.Stack_bar-track {
background: lightgray;
padding: .4rem;
}
.Stack_bar {
height: .4rem;
width: .7rem;
height: 9rem;
border-radius: .8rem;
background: gray;
}
/* Scrollbar */
*::-webkit-scrollbar {
width: 12px;
}
*::-webkit-scrollbar-track-piece {
background-color: #ddd;
}
*::-webkit-scrollbar-thumb {
background-color: #aaa;
border-radius: 6px;
border-style: none;
}
<section class="Stack_main-section">
<div class="Stack_content ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac turpis at massa consectetur malesuada vel eu lorem. Vivamus ac eros id ex hendrerit rutrum eget et turpis. Nunc mollis diam id purus porttitor eleifend a interdum neque. Quisque et molestie
enim, eu dignissim nunc. Suspendisse varius mauris eu aliquet rutrum. Maecenas convallis tincidunt tellus, nec tincidunt tellus venenatis at. Quisque eget lacinia magna, ac placerat justo. Donec cursus elementum massa, id posuere lacus posuere eget.
Nunc at dui sodales, varius erat vel, varius lorem. Pellentesque cursus iaculis felis, auctor ultrices ligula elementum vel. Maecenas est dui, ullamcorper ut semper vel, tincidunt sit amet tellus. Nunc ornare ornare sapien in condimentum. Morbi porttitor
feugiat ligula, sit amet feugiat tellus maximus eget. Sed lobortis semper urna, in accumsan ipsum. Aenean dictum dui non dui vehicula porta. Vivamus pellentesque ligula eu egestas facilisis. Pellentesque vitae turpis consectetur lorem laoreet auctor.
Nunc ultrices pellentesque mi, nec lobortis neque facilisis id. Quisque pharetra vitae nibh eu venenatis. Cras pretium convallis cursus. Phasellus quis ex nisi. Nulla et laoreet eros, ac laoreet ante. Maecenas ornare risus a pellentesque varius. Sed
tristique tellus quam, sed volutpat ex sodales quis. Phasellus congue velit a nisl consequat, at tincidunt mi gravida. Morbi sit amet magna a sapien varius accumsan. Phasellus scelerisque, urna faucibus placerat venenatis, dui est fermentum massa,
non lacinia arcu sem in orci. Ut elementum massa et turpis aliquam varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut elementum augue. Sed pulvinar eleifend cursus. Donec id mi odio. Ut nec nibh malesuada, aliquet velit nec,
tincidunt mauris. Mauris sagittis placerat enim, at faucibus turpis vestibulum vel. Pellentesque at venenatis mauris, lacinia blandit dolor. Integer massa sem, elementum a nulla quis, rutrum euismod felis. Cras a lacinia urna. Nulla scelerisque venenatis
lectus ut ullamcorper. Curabitur eu suscipit metus. Praesent velit elit, luctus a facilisis nec, tempus non diam. Fusce nec aliquam est. Maecenas odio odio, pulvinar vel volutpat et, ullamcorper a ligula. Fusce bibendum lacus in est ultrices, vitae
mattis mauris sodales. Curabitur massa nisl, placerat a nunc a, scelerisque rhoncus dui. Vestibulum nibh dui, dictum et porta vel, hendrerit et augue. Morbi viverra est vel sapien venenatis faucibus. Nullam iaculis congue quam. Vestibulum dignissim
iaculis nulla, congue tincidunt nisi iaculis vitae. Fusce mollis aliquam ante, a sagittis dolor mattis id. Morbi aliquam sem nunc, at dictum sem aliquam ac. Suspendisse molestie justo leo, at venenatis mauris aliquam eu. Nunc id tortor malesuada diam
consectetur dapibus sit amet a lorem. Pellentesque dictum et libero vitae semper. Donec sit amet ipsum vel nulla eleifend fringilla ac at velit. Donec consectetur aliquam metus. Integer eget ex et velit imperdiet pulvinar. Duis nisi ante, finibus
eu posuere id, sodales vel sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui ex, placerat eu felis a, luctus ultricies nibh. Nam malesuada viverra facilisis. Nam rhoncus elit velit, at ullamcorper nisi viverra scelerisque. Pellentesque
et lacus non dolor fermentum fermentum. Morbi in vulputate nunc, sit amet malesuada massa. Nullam euismod dui id egestas scelerisque. Donec vel ex ut justo mollis varius. Quisque at tortor nec est cursus iaculis. Vivamus gravida purus a ligula elementum
dictum. Mauris diam dolor, convallis quis imperdiet et, maximus quis leo. Morbi aliquam pretium lectus ac hendrerit.t
</div>
<!--div class="Stack_bar-track">
<div class="Stack_bar">
.
</div>
</div-->
</section>
I hope it helps.
::-webkit-scrollbar
::-webkit-scrollbar-button
::-webkit-scrollbar-track
::-webkit-scrollbar-track-piece
::-webkit-scrollbar-thumb
::-webkit-scrollbar-corner
::-webkit-resizer
These are the elements you're looking for. CSS-Tricks has some excellent examples outlined and what you're trying to achieve here isn't very specific, but if you clarify the kind of styles you're going for I'd be happy to edit my answer a bit to accommodate!
As well here's a CodePen with some pretty clean options so you can compare and see how the styoes react.
Hope this helps!
For browser's that don't use webkit as a render engine, you just want to add it's alternative.
Or simply use a plug-in. I found this megathread with every bit of information you will likely ever need on the topic.
https://stackoverflow.com/a/14150577/5860648
I am trying to add a class to each element (class abc) when it reaches 100px below the top of the viewport. However I cannot get the class added to each individual element. Rather it is adding the class to all divs. Any suggestions?
$(function() {
$(document).scroll(function() {
if ($(this).scrollTop() >= $('.abc').offset().top - 100) {
$(".abc").addClass("color");
} else {
$(".abc").removeClass("color");
}
});
});
#header {
height: 150px;
}
.abc {
background-color: orange;
}
.color {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
<h1>Header</h1>
</div>
<div class="abc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque semper aliquam neque, id condimentum orci egestas ac. Maecenas ullamcorper semper finibus. Quisque vitae semper lorem, ut mattis mi. Maecenas ut porta enim. Duis tellus sem, tincidunt
vitae turpis tristique, laoreet sodales nunc. Donec laoreet sollicitudin nibh, a porta risus elementum id. Vivamus et quam nec enim tincidunt tempus in sed ipsum. Quisque non arcu sem. Nulla eget massa ultricies, dignissim erat vel, tristique turpis.
Pellentesque non maximus est, in feugiat nibh. Morbi enim elit, sodales ac leo eget, interdum imperdiet elit. Nunc dapibus scelerisque aliquet.
</div>
<div class="abc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque semper aliquam neque, id condimentum orci egestas ac. Maecenas ullamcorper semper finibus. Quisque vitae semper lorem, ut mattis mi. Maecenas ut porta enim. Duis tellus sem, tincidunt
vitae turpis tristique, laoreet sodales nunc. Donec laoreet sollicitudin nibh, a porta risus elementum id. Vivamus et quam nec enim tincidunt tempus in sed ipsum. Quisque non arcu sem. Nulla eget massa ultricies, dignissim erat vel, tristique turpis.
Pellentesque non maximus est, in feugiat nibh. Morbi enim elit, sodales ac leo eget, interdum imperdiet elit. Nunc dapibus scelerisque aliquet.
</div>
<div class="abc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque semper aliquam neque, id condimentum orci egestas ac. Maecenas ullamcorper semper finibus. Quisque vitae semper lorem, ut mattis mi. Maecenas ut porta enim. Duis tellus sem, tincidunt
vitae turpis tristique, laoreet sodales nunc. Donec laoreet sollicitudin nibh, a porta risus elementum id. Vivamus et quam nec enim tincidunt tempus in sed ipsum. Quisque non arcu sem. Nulla eget massa ultricies, dignissim erat vel, tristique turpis.
Pellentesque non maximus est, in feugiat nibh. Morbi enim elit, sodales ac leo eget, interdum imperdiet elit. Nunc dapibus scelerisque aliquet.
</div>
<div class="abc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque semper aliquam neque, id condimentum orci egestas ac. Maecenas ullamcorper semper finibus. Quisque vitae semper lorem, ut mattis mi. Maecenas ut porta enim. Duis tellus sem, tincidunt
vitae turpis tristique, laoreet sodales nunc. Donec laoreet sollicitudin nibh, a porta risus elementum id. Vivamus et quam nec enim tincidunt tempus in sed ipsum. Quisque non arcu sem. Nulla eget massa ultricies, dignissim erat vel, tristique turpis.
Pellentesque non maximus est, in feugiat nibh. Morbi enim elit, sodales ac leo eget, interdum imperdiet elit. Nunc dapibus scelerisque aliquet.
</div>
<div class="abc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque semper aliquam neque, id condimentum orci egestas ac. Maecenas ullamcorper semper finibus. Quisque vitae semper lorem, ut mattis mi. Maecenas ut porta enim. Duis tellus sem, tincidunt
vitae turpis tristique, laoreet sodales nunc. Donec laoreet sollicitudin nibh, a porta risus elementum id. Vivamus et quam nec enim tincidunt tempus in sed ipsum. Quisque non arcu sem. Nulla eget massa ultricies, dignissim erat vel, tristique turpis.
Pellentesque non maximus est, in feugiat nibh. Morbi enim elit, sodales ac leo eget, interdum imperdiet elit. Nunc dapibus scelerisque aliquet.
</div>
Your logic is correct for checking a single element, however to achieve this for a collection you need to loop over every element and evaluate their position individually. Something like this:
$(function() {
$(document).scroll(function() {
var scrollTop = $(this).scrollTop();
$('.abc').each(function() {
$(this).toggleClass('color', scrollTop >= $(this).offset().top - 100);
});
});
});
#header { height: 150px; }
.abc { background-color: orange; }
.color { background-color: blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
<h1>Header</h1>
</div>
<div class="abc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque semper aliquam neque, id condimentum orci egestas ac. Maecenas ullamcorper semper finibus. Quisque vitae semper lorem, ut mattis mi. Maecenas ut porta enim. Duis tellus sem, tincidunt
vitae turpis tristique, laoreet sodales nunc. Donec laoreet sollicitudin nibh, a porta risus elementum id. Vivamus et quam nec enim tincidunt tempus in sed ipsum. Quisque non arcu sem. Nulla eget massa ultricies, dignissim erat vel, tristique turpis.
Pellentesque non maximus est, in feugiat nibh. Morbi enim elit, sodales ac leo eget, interdum imperdiet elit. Nunc dapibus scelerisque aliquet.
</div>
<div class="abc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque semper aliquam neque, id condimentum orci egestas ac. Maecenas ullamcorper semper finibus. Quisque vitae semper lorem, ut mattis mi. Maecenas ut porta enim. Duis tellus sem, tincidunt
vitae turpis tristique, laoreet sodales nunc. Donec laoreet sollicitudin nibh, a porta risus elementum id. Vivamus et quam nec enim tincidunt tempus in sed ipsum. Quisque non arcu sem. Nulla eget massa ultricies, dignissim erat vel, tristique turpis.
Pellentesque non maximus est, in feugiat nibh. Morbi enim elit, sodales ac leo eget, interdum imperdiet elit. Nunc dapibus scelerisque aliquet.
</div>
<div class="abc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque semper aliquam neque, id condimentum orci egestas ac. Maecenas ullamcorper semper finibus. Quisque vitae semper lorem, ut mattis mi. Maecenas ut porta enim. Duis tellus sem, tincidunt
vitae turpis tristique, laoreet sodales nunc. Donec laoreet sollicitudin nibh, a porta risus elementum id. Vivamus et quam nec enim tincidunt tempus in sed ipsum. Quisque non arcu sem. Nulla eget massa ultricies, dignissim erat vel, tristique turpis.
Pellentesque non maximus est, in feugiat nibh. Morbi enim elit, sodales ac leo eget, interdum imperdiet elit. Nunc dapibus scelerisque aliquet.
</div>
<div class="abc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque semper aliquam neque, id condimentum orci egestas ac. Maecenas ullamcorper semper finibus. Quisque vitae semper lorem, ut mattis mi. Maecenas ut porta enim. Duis tellus sem, tincidunt
vitae turpis tristique, laoreet sodales nunc. Donec laoreet sollicitudin nibh, a porta risus elementum id. Vivamus et quam nec enim tincidunt tempus in sed ipsum. Quisque non arcu sem. Nulla eget massa ultricies, dignissim erat vel, tristique turpis.
Pellentesque non maximus est, in feugiat nibh. Morbi enim elit, sodales ac leo eget, interdum imperdiet elit. Nunc dapibus scelerisque aliquet.
</div>
<div class="abc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque semper aliquam neque, id condimentum orci egestas ac. Maecenas ullamcorper semper finibus. Quisque vitae semper lorem, ut mattis mi. Maecenas ut porta enim. Duis tellus sem, tincidunt
vitae turpis tristique, laoreet sodales nunc. Donec laoreet sollicitudin nibh, a porta risus elementum id. Vivamus et quam nec enim tincidunt tempus in sed ipsum. Quisque non arcu sem. Nulla eget massa ultricies, dignissim erat vel, tristique turpis.
Pellentesque non maximus est, in feugiat nibh. Morbi enim elit, sodales ac leo eget, interdum imperdiet elit. Nunc dapibus scelerisque aliquet.
</div>
Lets try something like this.
$('.abc').each(function(){ //For each .abc
if($(window).scrollTop() >= $(this).offset().top - 100) { //see if is in offset
$('.abc').removeClass("color"); //remove all colors
$(this).addClass("color"); //set the offset .abc with color
}
})
Let me know if works... see this example. https://jsfiddle.net/056vzoa2/5/
Regards!
I got an layout using bootstrap with multiple floating divs.
I want to retrieve the space between the divs using JavaScript. Ive only no idea how i can do this. See below picture.
A picture says a 1000 words ;)
Ive created a fiddle with above layout, i will paste it here so you can play with it if you want.
.page-container {
background: #ededed;
padding: 40px 0;
}
.column {
padding: 15px;
background-color: white;
box-shadow: 1px 1px 3px #ccc;
}
[class^="col-"] {
margin-bottom: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="page-container">
<div class="container">
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="column">
<h2>
Floating element #1
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus ullamcorper commodo. Donec volutpat porttitor elit sit amet aliquet. Nam eget felis vel sapien tempus tincidunt placerat ac lectus. Donec malesuada, est ac accumsan porta, leo augue varius ante, ut cursus tortor mauris non ipsum. Vestibulum nec odio diam. Integer gravida varius risus quis euismod. Donec iaculis velit vitae semper bibendum. Donec et volutpat ligula. Sed in elit et risus facilisis maximus. Cras tempor sollicitudin velit, a mattis elit molestie non. Maecenas vitae eros in leo feugiat maximus at porttitor mauris. Vivamus vulputate tellus laoreet neque vulputate suscipit sit amet eget ipsum. Donec faucibus dignissim erat, at bibendum dui laoreet eget.
</p>
<p>
Curabitur quam sapien, lacinia sit amet sagittis sed, fringilla nec arcu. Morbi at velit facilisis, aliquet justo non, tincidunt mauris. Curabitur tempus ante sit amet auctor fringilla. Sed ut velit ac purus euismod placerat. Fusce ultrices feugiat tortor at condimentum. Ut eleifend eget velit at vulputate. In commodo ligula et urna ultrices, non ullamcorper est pharetra. Donec pharetra, purus a aliquam rutrum, lacus arcu porttitor nunc, eu maximus eros justo sed neque. Fusce a urna non enim lobortis venenatis. Suspendisse potenti.
</p>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="column">
<h2>
Floating element #2
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus ullamcorper commodo. Donec volutpat porttitor elit sit amet aliquet. Nam eget felis vel sapien tempus tincidunt placerat ac lectus. Donec malesuada, est ac accumsan porta, leo augue varius ante, ut cursus tortor mauris non ipsum. Vestibulum nec odio diam. Integer gravida varius risus quis euismod. Donec iaculis velit vitae semper bibendum. Donec et volutpat ligula. Sed in elit et risus facilisis maximus. Cras tempor sollicitudin velit, a mattis elit molestie non. Maecenas vitae eros in leo feugiat maximus at porttitor mauris. Vivamus vulputate tellus laoreet neque vulputate suscipit sit amet eget ipsum. Donec faucibus dignissim erat, at bibendum dui laoreet eget.
</p>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="column">
<h2>
Floating element #3
</h2>
<p>
Curabitur quam sapien, lacinia sit amet sagittis sed, fringilla nec arcu. Morbi at velit facilisis, aliquet justo non, tincidunt mauris. Curabitur tempus ante sit amet auctor fringilla. Sed ut velit ac purus euismod placerat. Fusce ultrices feugiat tortor at condimentum. Ut eleifend eget velit at vulputate. In commodo ligula et urna ultrices, non ullamcorper est pharetra. Donec pharetra, purus a aliquam rutrum, lacus arcu porttitor nunc, eu maximus eros justo sed neque. Fusce a urna non enim lobortis venenatis. Suspendisse potenti.
</p>
<p>
Fusce a velit et justo porttitor sollicitudin a a velit. Praesent ultrices arcu a sodales ultricies. Etiam cursus mattis dapibus. Fusce vulputate commodo pretium. Suspendisse a orci vitae ipsum interdum dapibus a quis velit. Proin euismod, lectus id euismod semper, tellus nunc luctus dui, consectetur venenatis erat mi eu dolor. Nunc eleifend semper lacus, at hendrerit massa. Praesent ac magna at lacus commodo faucibus eu sit amet magna. Donec pellentesque felis et leo interdum dignissim. Sed sit amet sapien ac quam auctor semper quis ut nibh. Vivamus consectetur, ipsum luctus semper viverra, sem arcu sagittis mauris, a interdum odio sapien in augue.
</p>
<p>
Nam ut bibendum urna, sed congue neque. Nunc a nunc venenatis, porttitor odio vitae, finibus est. Suspendisse quis purus a diam aliquam ullamcorper eu sed dolor. Etiam ac eros eget nisl pretium lobortis. Nulla convallis id nunc eget efficitur. Morbi vel elementum justo. Phasellus et egestas quam. Cras eu tristique urna. Cras ac justo efficitur, consectetur eros et, tincidunt nulla. Quisque et cursus ipsum. Ut tincidunt, purus et tempor fermentum, nulla diam suscipit ex, non sodales eros nunc vel ante. Duis quis justo quam. Sed imperdiet lorem et blandit pretium. Etiam elit dui, tristique et vehicula vitae, venenatis et augue.
</p>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="column">
<h2>
Floating element #4
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus ullamcorper commodo. Donec volutpat porttitor elit sit amet aliquet. Nam eget felis vel sapien tempus tincidunt placerat ac lectus. Donec malesuada, est ac accumsan porta, leo augue varius ante, ut cursus tortor mauris non ipsum. Vestibulum nec odio diam. Integer gravida varius risus quis euismod. Donec iaculis velit vitae semper bibendum. Donec et volutpat ligula. Sed in elit et risus facilisis maximus. Cras tempor sollicitudin velit, a mattis elit molestie non. Maecenas vitae eros in leo feugiat maximus at porttitor mauris. Vivamus vulputate tellus laoreet neque vulputate suscipit sit amet eget ipsum. Donec faucibus dignissim erat, at bibendum dui laoreet eget.
</p>
<p>
Curabitur quam sapien, lacinia sit amet sagittis sed, fringilla nec arcu. Morbi at velit facilisis, aliquet justo non, tincidunt mauris. Curabitur tempus ante sit amet auctor fringilla. Sed ut velit ac purus euismod placerat. Fusce ultrices feugiat tortor at condimentum. Ut eleifend eget velit at vulputate. In commodo ligula et urna ultrices, non ullamcorper est pharetra. Donec pharetra, purus a aliquam rutrum, lacus arcu porttitor nunc, eu maximus eros justo sed neque. Fusce a urna non enim lobortis venenatis. Suspendisse potenti.
</p>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="column">
<h2>
Floating element #4
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus ullamcorper commodo. Donec volutpat porttitor elit sit amet aliquet. Nam eget felis vel sapien tempus tincidunt placerat ac lectus. Donec malesuada, est ac accumsan porta, leo augue varius ante, ut cursus tortor mauris non ipsum. Vestibulum nec odio diam. Integer gravida varius risus quis euismod. Donec iaculis velit vitae semper bibendum. Donec et volutpat ligula. Sed in elit et risus facilisis maximus. Cras tempor sollicitudin velit, a mattis elit molestie non. Maecenas vitae eros in leo feugiat maximus at porttitor mauris. Vivamus vulputate tellus laoreet neque vulputate suscipit sit amet eget ipsum. Donec faucibus dignissim erat, at bibendum dui laoreet eget.
</p>
</div>
</div>
</div>
</div>
Im trying to get those pixel, and move the underlying div up using JavaScript. I know i can use something like masonry. But i can't get those working in my application.
Does anyone have an idea how i can do this? (oh, using jQuery is no problem)
Try one of:
var h = document.getElementById('someDiv').clientHeight;
var h = document.getElementById('someDiv').offsetHeight;
var h = document.getElementById('someDiv').scrollHeight;
clientHeight includes the height and vertical padding.
offsetHeight includes the height, vertical padding, and vertical borders.
scrollHeight includes the height of the contained document (would be greater than just height in case of scrolling), vertical padding, and vertical borders.
with JQuery
$('#someDiv').height();
$('#someDiv').width();
Get first element's x,y cordinates (e.g Retrieve the position (X,Y) of an HTML element)
Get first elements height and width (e.g. marco gomes answer)
Get fourth element's x,y cordinates
Calculate:
Fourth's x pos minus (First's x pos + height) = empty space's height
As it is same width as other's width, you have a width.
If you need dynamically find gaps, you can loop all divs and put them in column groups (with help of x pos). Then you do above for each group's current and next in order element (they should be in right order). If the vertical difference is above set rule, you can assume you have a gap.
I have a menu and footer with a position:fixed;, so they stay all the time at the top and bottom.
In this case Menu is always at the top and footer always at the bottom.
Here is the HTML Markup and CSS
PLEASE READ BELOW TO SEE WHAT I AM TRYING TO ACHIEVE AND TO SEE UPDATE.
**** ORIGINAL POST ****
html, body {
padding:0;
margin:0;
}
nav, footer {
position:fixed;
background:#900;
height:50px;
width:100%;
}
nav {
top:0;
}
footer {
bottom:0;
}
p {
background: #E6E6E6;
margin:0 0 10px 0;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Fixed Footer</title>
</head>
<body>
<nav>Top Fixed Menu</nav>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut libero in est dictum rutrum eu in nibh. Etiam tincidunt neque ante, eu efficitur velit semper sed. Ut lobortis et felis vitae aliquet. Nulla tincidunt leo vitae elit posuere, eu fermentum metus dictum. Praesent tincidunt egestas massa. Cras iaculis aliquam malesuada. Pellentesque at turpis diam. Vestibulum turpis augue, pulvinar et augue quis, venenatis dapibus dui. Nunc sollicitudin porta mauris, vel gravida erat placerat a.</p>
<p>Vivamus facilisis orci nec leo ultrices tristique. Donec euismod tincidunt luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer congue mattis convallis. Curabitur in dictum nisi, lacinia porta lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque commodo imperdiet scelerisque. Mauris vitae erat ut enim imperdiet pulvinar a vitae augue. Pellentesque non sem ipsum. Nam id quam metus. Aliquam nulla ipsum, ullamcorper vel est vitae, euismod feugiat massa. Nullam molestie, odio sollicitudin egestas laoreet, elit tortor pharetra arcu, consectetur dignissim quam libero in augue. Suspendisse augue diam, condimentum nec sagittis ac, rutrum sit amet orci. Nulla facilisi. Cras finibus lorem diam. In non tortor ut urna lobortis fermentum. Maecenas a orci odio. Aenean turpis enim, tincidunt nec mi non, dapibus iaculis diam. Vivamus eleifend velit id nulla eleifend gravida.</p>
<p>Sed rutrum dui non dui rhoncus tristique. Nulla in enim est. Sed sollicitudin pharetra risus ut vestibulum. Sed sed cursus magna, non imperdiet turpis. Praesent gravida lacinia congue. In non neque sed nulla fermentum eleifend gravida ac sem. In eget molestie velit. Suspendisse bibendum nec eros id dapibus. Quisque sagittis a ante in mollis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut libero in est dictum rutrum eu in nibh. Etiam tincidunt neque ante, eu efficitur velit semper sed. Ut lobortis et felis vitae aliquet. Nulla tincidunt leo vitae elit posuere, eu fermentum metus dictum. Praesent tincidunt egestas massa. Cras iaculis aliquam malesuada. Pellentesque at turpis diam. Vestibulum turpis augue, pulvinar et augue quis, venenatis dapibus dui. Nunc sollicitudin porta mauris, vel gravida erat placerat a.</p>
<p>Vivamus facilisis orci nec leo ultrices tristique. Donec euismod tincidunt luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer congue mattis convallis. Curabitur in dictum nisi, lacinia porta lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque commodo imperdiet scelerisque. Mauris vitae erat ut enim imperdiet pulvinar a vitae augue. Pellentesque non sem ipsum. Nam id quam metus. Aliquam nulla ipsum, ullamcorper vel est vitae, euismod feugiat massa. Nullam molestie, odio sollicitudin egestas laoreet, elit tortor pharetra arcu, consectetur dignissim quam libero in augue. Suspendisse augue diam, condimentum nec sagittis ac, rutrum sit amet orci. Nulla facilisi. Cras finibus lorem diam. In non tortor ut urna lobortis fermentum. Maecenas a orci odio. Aenean turpis enim, tincidunt nec mi non, dapibus iaculis diam. Vivamus eleifend velit id nulla eleifend gravida.</p>
<p>Sed rutrum dui non dui rhoncus tristique. Nulla in enim est. Sed sollicitudin pharetra risus ut vestibulum. Sed sed cursus magna, non imperdiet turpis. Praesent gravida lacinia congue. In non neque sed nulla fermentum eleifend gravida ac sem. In eget molestie velit. Suspendisse bibendum nec eros id dapibus. Quisque sagittis a ante in mollis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut libero in est dictum rutrum eu in nibh. Etiam tincidunt neque ante, eu efficitur velit semper sed. Ut lobortis et felis vitae aliquet. Nulla tincidunt leo vitae elit posuere, eu fermentum metus dictum. Praesent tincidunt egestas massa. Cras iaculis aliquam malesuada. Pellentesque at turpis diam. Vestibulum turpis augue, pulvinar et augue quis, venenatis dapibus dui. Nunc sollicitudin porta mauris, vel gravida erat placerat a.</p>
<p>Vivamus facilisis orci nec leo ultrices tristique. Donec euismod tincidunt luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer congue mattis convallis. Curabitur in dictum nisi, lacinia porta lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque commodo imperdiet scelerisque. Mauris vitae erat ut enim imperdiet pulvinar a vitae augue. Pellentesque non sem ipsum. Nam id quam metus. Aliquam nulla ipsum, ullamcorper vel est vitae, euismod feugiat massa. Nullam molestie, odio sollicitudin egestas laoreet, elit tortor pharetra arcu, consectetur dignissim quam libero in augue. Suspendisse augue diam, condimentum nec sagittis ac, rutrum sit amet orci. Nulla facilisi. Cras finibus lorem diam. In non tortor ut urna lobortis fermentum. Maecenas a orci odio. Aenean turpis enim, tincidunt nec mi non, dapibus iaculis diam. Vivamus eleifend velit id nulla eleifend gravida.</p>
<p>Sed rutrum dui non dui rhoncus tristique. Nulla in enim est. Sed sollicitudin pharetra risus ut vestibulum. Sed sed cursus magna, non imperdiet turpis. Praesent gravida lacinia congue. In non neque sed nulla fermentum eleifend gravida ac sem. In eget molestie velit. Suspendisse bibendum nec eros id dapibus. Quisque sagittis a ante in mollis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut libero in est dictum rutrum eu in nibh. Etiam tincidunt neque ante, eu efficitur velit semper sed. Ut lobortis et felis vitae aliquet. Nulla tincidunt leo vitae elit posuere, eu fermentum metus dictum. Praesent tincidunt egestas massa. Cras iaculis aliquam malesuada. Pellentesque at turpis diam. Vestibulum turpis augue, pulvinar et augue quis, venenatis dapibus dui. Nunc sollicitudin porta mauris, vel gravida erat placerat a.</p>
<p>Vivamus facilisis orci nec leo ultrices tristique. Donec euismod tincidunt luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer congue mattis convallis. Curabitur in dictum nisi, lacinia porta lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque commodo imperdiet scelerisque. Mauris vitae erat ut enim imperdiet pulvinar a vitae augue. Pellentesque non sem ipsum. Nam id quam metus. Aliquam nulla ipsum, ullamcorper vel est vitae, euismod feugiat massa. Nullam molestie, odio sollicitudin egestas laoreet, elit tortor pharetra arcu, consectetur dignissim quam libero in augue. Suspendisse augue diam, condimentum nec sagittis ac, rutrum sit amet orci. Nulla facilisi. Cras finibus lorem diam. In non tortor ut urna lobortis fermentum. Maecenas a orci odio. Aenean turpis enim, tincidunt nec mi non, dapibus iaculis diam. Vivamus eleifend velit id nulla eleifend gravida.</p>
<p>Sed rutrum dui non dui rhoncus tristique. Nulla in enim est. Sed sollicitudin pharetra risus ut vestibulum. Sed sed cursus magna, non imperdiet turpis. Praesent gravida lacinia congue. In non neque sed nulla fermentum eleifend gravida ac sem. In eget molestie velit. Suspendisse bibendum nec eros id dapibus. Quisque sagittis a ante in mollis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut libero in est dictum rutrum eu in nibh. Etiam tincidunt neque ante, eu efficitur velit semper sed. Ut lobortis et felis vitae aliquet. Nulla tincidunt leo vitae elit posuere, eu fermentum metus dictum. Praesent tincidunt egestas massa. Cras iaculis aliquam malesuada. Pellentesque at turpis diam. Vestibulum turpis augue, pulvinar et augue quis, venenatis dapibus dui. Nunc sollicitudin porta mauris, vel gravida erat placerat a.</p>
<p>Vivamus facilisis orci nec leo ultrices tristique. Donec euismod tincidunt luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer congue mattis convallis. Curabitur in dictum nisi, lacinia porta lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque commodo imperdiet scelerisque. Mauris vitae erat ut enim imperdiet pulvinar a vitae augue. Pellentesque non sem ipsum. Nam id quam metus. Aliquam nulla ipsum, ullamcorper vel est vitae, euismod feugiat massa. Nullam molestie, odio sollicitudin egestas laoreet, elit tortor pharetra arcu, consectetur dignissim quam libero in augue. Suspendisse augue diam, condimentum nec sagittis ac, rutrum sit amet orci. Nulla facilisi. Cras finibus lorem diam. In non tortor ut urna lobortis fermentum. Maecenas a orci odio. Aenean turpis enim, tincidunt nec mi non, dapibus iaculis diam. Vivamus eleifend velit id nulla eleifend gravida.</p>
<p>Sed rutrum dui non dui rhoncus tristique. Nulla in enim est. Sed sollicitudin pharetra risus ut vestibulum. Sed sed cursus magna, non imperdiet turpis. Praesent gravida lacinia congue. In non neque sed nulla fermentum eleifend gravida ac sem. In eget molestie velit. Suspendisse bibendum nec eros id dapibus. Quisque sagittis a ante in mollis.</p>
<footer>Bottom Fixed Footer</footer>
</body>
</html>
What I am trying to achieve is that if viewport goes below 300px in height the distance between the Top Menu and the Footer is always 500px.
But if viewport goes beyond 500px in height, the Top Menu and Footer stay fixed at the top and the bottom and the space between them increases as long as the viewport keeps increasing.
How I can achieve this?
The content flow when scrolling if anyone wonders.
**** UPDATED ****
I end up using #media for that specific height I did not want the footer to be fixed when viewport was below 500 px height.
Originally I had this
nav, footer {
position:fixed;
background:#900;
height:50px;
width:100%;
}
I just added this add media when the viewport goes below 500px height.
#media screen and (max-height: 499px) {
footer {
position:relative;
}
}
I also added this inside the HEAD element to make the #media work.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If the viewport is <500px, limit the displayed area to the height minus the header, while keeping the footer at the bottom. If it is >500px, also keep the footer at the bottom.
This should work:
function addmore() {
for (var i = 0; i < 60; i++)
document.getElementById('a').innerHTML = '<p>'+i+': some page content</p>' + document.getElementById('a').innerHTML;
}
html,
body {
height: 100%;
width: 100%;
margin: 0;
}
body {
overflow-y: hidden;
min-height: 500px;
display: flex;
flex-direction: column;
}
nav,
footer {
flex: 0;
background: red;
line-height: 50px;
color: white;
width: 100%;
}
main {
flex: 1;
position: relative;
overflow-y: auto;
max-height: calc(100% - 100px);
}
#media screen and (max-height: 499px) {
.content {
max-height: calc(100vh - 50px);
width: 100%;
overflow-y: auto;
}
}
<body>
<nav>nav bar</nav>
<main>
<section class="content">
<button onclick="addmore()">add more</button>
<p id="a">some page content</p>
</section>
</main>
<footer>footer</footer>
</body>
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%;
}