I have a popup window, that is a div. It shouldn't go out of the screen, so I added an other div that is scrollable to facilitate the content if it's longer than the screen height. I can set the inner divs max-height in javascript like this (because I have content before it, so I don't know where it starts.):
var rect = container.getBoundingClientRect();
container.style.maxHeight = "calc(100vh - " + rect.top + "px - 15vh)";
This approach works on computers, but on smartphones in Chrome, the viewheight is more than what the user actually sees, because the url bar takes up space, so when that bar is shown, the end of the div is out of the screen. So how can I make the div end "15vh" from the actual bottom of the screen.
My code:
var container = document.getElementById("container");
var rect = container.getBoundingClientRect();
container.style.maxHeight = "calc(100vh - " + rect.top + "px - 15vh)";
body {
background-color: black;
}
#popup_content {
position: relative;
margin: auto;
background-color: red;
width: 80%;
max-width: 500px;
}
#container {
overflow: auto;
max-height: 50vh;
}
<div id="popup_content">
<p>some content</p>
<div id="container">
A lot of text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempus, est vel congue eleifend, ante tortor ultricies leo, eu consectetur magna odio ac nibh. Nulla laoreet odio dui, ac aliquet purus porttitor et. Aliquam blandit vestibulum mauris, vel eleifend diam ultrices in. Vivamus eget eleifend dui. Cras aliquet libero et lorem venenatis ultricies. Vestibulum pulvinar erat eget velit porta, a gravida nunc scelerisque. Aliquam ut varius nibh. Aenean volutpat imperdiet nibh quis vestibulum. Donec eget magna varius, tempus augue ac, auctor ipsum. Vivamus quis egestas mauris. Vivamus dapibus risus hendrerit viverra ullamcorper. Pellentesque sodales elementum leo, sit amet ultricies elit rhoncus eu. Phasellus consectetur sit amet sem at mattis. Aliquam finibus risus ut ante pharetra, ut condimentum ligula convallis. Maecenas hendrerit, ligula at finibus pellentesque, justo ante varius metus, a luctus libero dui ut risus. Pellentesque dictum, risus ut fermentum tincidunt, purus massa dictum lectus, id aliquam neque risus at augue. Phasellus laoreet fermentum elementum. Donec sit amet aliquam neque. In consequat nec augue aliquam congue. Suspendisse purus neque, luctus vel placerat sed, pellentesque eget neque. Morbi tincidunt iaculis neque in imperdiet. Donec id tortor nunc. In lacinia rhoncus lectus, vitae feugiat felis egestas at.
</div>
</div>
Related
I want to make a CTA button that sticks to the bottom of the page after page scroll reaches to some extent. Kindly look at the image below:
The rules follow:
On load, it should be on the original position of the CTA button.
When the page is getting scrolled, the CTA button will follow.
When the CTA button reaches to the top of the window, the button will move to the bottom-right corner and remains sticky over there.
Any codepen, jsfiddle or website references about this kind of interaction will be appreciated.
There are multiple ways to do this like using plugins or using simple CSS and JavaScript(below example). If you are looking for animation to button on the scroll you can make some adjustments in CSS with animation code or I guess some of the plugins are already doing this.
window.onscroll = function() {myFunction()};
var btn = document.getElementById("floatBtn");
var sticky = btn.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
btn.classList.add("sticky")
} else {
btn.classList.remove("sticky");
}
}
body {
margin: 0;
font-size: 28px;
font-family: Arial, Helvetica, sans-serif;
}
.header {
background-color: #f1f1f1;
padding: 30px;
text-align: center;
}
.content {
padding: 16px;
}
.keka {
width: 100%;
text-align: center;
}
#floatBtn {
background: #004567;
color: white;
padding: 10px 30px;
font-size: 18px;
display: inline-block;
}
.sticky {
position: fixed;
bottom: 0;
right: 20px;
}
.sticky + .content {
padding-top: 60px;
}
.content{
height: 1900px
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<div class="header">
<h2>Header of the page</h2>
<p>Some content</p>
</div>
<div class="keka">
<button id="floatBtn">Floating button</button>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet ex eu nulla interdum fermentum a at est. Vestibulum vehicula augue et nisl porta, at pretium leo consequat. Suspendisse sit amet semper nisi. In hac habitasse platea dictumst. In vehicula elit ut efficitur mollis. Nam vehicula pulvinar pulvinar. Curabitur neque purus, placerat eget nulla iaculis, tincidunt euismod lectus. Praesent facilisis at sem sit amet sagittis. Cras sagittis mi vel ornare convallis. Morbi tempus tempus lacus, eget lacinia magna porttitor non. Praesent tellus quam, molestie tincidunt libero sit amet, luctus viverra velit. Etiam vestibulum aliquam posuere. Praesent a dapibus sem. Sed cursus mi sit amet nisl maximus, eget varius lectus consectetur. Mauris molestie ac mi non malesuada. Proin faucibus sem vitae ex blandit tempor. Donec ut diam in tellus malesuada lacinia maximus non arcu. Proin blandit nisl at lacus feugiat, et auctor lectus viverra. Donec convallis eleifend ligula sagittis viverra. Vivamus mattis, felis et finibus maximus, diam felis vestibulum odio, eget efficitur tellus magna nec ante. Sed porta elit commodo nisi efficitur, in egestas nibh maximus. Integer nec leo ac ligula semper finibus at rhoncus felis. In pellentesque tincidunt pretium. Ut imperdiet eu nisi quis molestie. Cras lectus turpis, aliquam ut egestas ac, condimentum quis sem. In nec lorem dolor. Fusce non velit nec purus aliquet ultricies porttitor at metus. Donec et libero id nunc viverra dictum vel et sem. Integer tellus ligula, posuere quis dignissim sit amet, suscipit sit amet arcu. Vestibulum nec sodales magna, vitae varius justo. Ut ut felis a odio gravida malesuada eu ut lectus. Suspendisse quis nisl vel sem cursus luctus ac in nibh. Praesent at velit ac dolor convallis condimentum. Maecenas ac sagittis odio. In luctus eros sit amet accumsan maximus. Integer non dictum magna, at viverra urna. Mauris lacinia sodales nibh in scelerisque. Ut viverra ante ut nunc commodo, eu varius ipsum rutrum. Morbi dictum sodales dignissim. In eu finibus arcu. In consectetur eleifend libero. Aliquam purus felis, faucibus et rutrum non, consequat at metus. Cras ultricies metus eget rhoncus pulvinar. Quisque hendrerit at lectus fringilla aliquam. Sed viverra tellus tellus, eget fermentum mi ultrices in. Cras auctor, tortor quis eleifend aliquet, dui orci volutpat erat, quis sagittis nisl nisi at lacus. Suspendisse non condimentum orci. Quisque in elit mi. Praesent malesuada nibh a sapien fermentum vehicula. In in felis nibh. Nunc vitae turpis et est aliquet tempor vulputate volutpat neque. Vestibulum ut sapien sit amet diam sodales convallis sit amet euismod urna. In vehicula fermentum est, non porttitor risus pellentesque quis. Fusce condimentum mauris ut felis fringilla maximus. Nullam pharetra nisi nec enim sodales tincidunt. Morbi imperdiet felis eget lacus sagittis ornare. Donec euismod metus at erat luctus, non ullamcorper nunc ultricies. Sed sit amet vestibulum urna, et faucibus felis. Curabitur non mollis arcu, ut rhoncus leo. Integer sagittis iaculis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
</div>
</body>
</html>
I have an element at the top of the screen with position:sticky; and a JS scroll eventlistener to add a stuck class when the element is stuck (scroll Y is bigger than 0).
This stuck makes an element (that has CSS transition) inside the sticky element to reduce in height.
When you scroll very slowly, this change in height makes the scrollY jump back to zero and removes the stuck class, and this creates a jolty scrolling loop which is infinite until you scroll faster and outscroll the issue.
How can I make this smooth when using position: sticky, you can see it live here:
https://jsfiddle.net/27rzba5v/
This is happening because you're changing the element's height, which is affecting the box model and thus the dimensions of your document. A simple fix would be to instead use a transform on .wrap instead of transitioning its height. It's better to animate transforms and opacity as it can be handled by the GPU rather than by making the browser repaint.
var lastScrollY = 0;
var ticking = false;
window.addEventListener('scroll', function(e) {
lastScrollY = window.scrollY;
if ( ! ticking ) {
window.requestAnimationFrame(function() {
console.log( lastScrollY );
if ( lastScrollY > 0 ) {
document.body.classList.add('stuck');
} else {
document.body.classList.remove('stuck');
}
ticking = false;
});
ticking = true;
}
} );
body {
margin: 0;
}
.wrap {
background: #666;
text-align: center;
position: sticky;
top: 0;
transition: 0.5s; /* Move transition here */
transform-origin: top left; /* Make sure transition happens from the top left */
}
.block {
width: 80px;
height: 80px;
background: red;
display: block;
}
.stuck .wrap { /* Transform wrap instead of block */
transform: scaleY(.5); /* Change scale instead of height */
}
<div class="wrap">
<span class="block"></span>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac lorem a metus tincidunt eleifend id in odio. Nam malesuada hendrerit tristique. Pellentesque id ornare elit, ac lobortis metus. Sed iaculis et nisi et consectetur. Proin pellentesque metus mi, quis fringilla mauris pulvinar et. Vivamus pharetra elit ligula, eu consectetur magna consequat nec. Donec sed enim sit amet augue malesuada varius id a libero. Nullam nec ante id justo elementum congue quis in purus. Integer finibus cursus volutpat. Donec non laoreet ipsum.
Maecenas id venenatis velit, eu feugiat dolor. Vestibulum malesuada erat ut turpis mattis vehicula. Vestibulum sem leo, cursus quis lacinia eu, tincidunt eu velit. Nulla odio elit, tristique vel bibendum vitae, placerat nec eros. Proin auctor id leo sed rutrum. Proin convallis erat sit amet neque aliquam vestibulum. Ut sodales vel nisl eu imperdiet.
Donec a porttitor dui, vitae ullamcorper nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam non elit eu elit blandit hendrerit id ut eros. Duis sagittis elementum ligula eu venenatis. Aenean nunc mauris, dignissim ut venenatis ac, pharetra eget magna. Curabitur elementum enim sed pharetra rhoncus. Praesent sodales at ex at consectetur. Curabitur sed dictum mi, ut eleifend arcu. Nam feugiat risus quis congue porttitor. Maecenas vehicula lorem ultrices ante sollicitudin, placerat sollicitudin dolor fermentum. Aliquam arcu turpis, faucibus vel placerat a, molestie vel lectus. Sed condimentum euismod tincidunt. Mauris odio tortor, luctus id eleifend vitae, aliquet ut libero. Vestibulum vitae placerat turpis. Duis nec facilisis eros. Morbi ipsum arcu, tempus ac massa nec, mollis aliquet lacus.
Phasellus maximus eros quis massa maximus, et mattis tellus cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus interdum, cursus diam ut, posuere purus. Duis non vestibulum nulla, vitae egestas elit. Phasellus venenatis libero in nunc lobortis tempor in vel orci. Praesent varius lacus eleifend, pretium lectus ut, pulvinar arcu. Nunc ornare dolor velit, id pulvinar urna semper eget. Aenean finibus dui vitae dolor ullamcorper finibus. Cras consequat viverra tellus, a accumsan sem viverra sed. Nulla felis tortor, laoreet non tincidunt elementum, tempus ac risus. Sed nibh nisl, ultrices vel iaculis in, fringilla at ipsum. Curabitur metus ligula, tincidunt non arcu eget, ultricies pellentesque ligula. Duis id est posuere, molestie urna non, gravida tortor. Praesent lacinia erat ac diam sagittis, quis faucibus nunc blandit.
Fusce aliquet tincidunt turpis, ut consequat metus consectetur at. Nunc volutpat semper enim, ut finibus orci luctus in. Mauris pharetra consectetur arcu sed pulvinar. Sed cursus fermentum velit, mattis varius ante commodo ac. Fusce erat mauris, sagittis quis eros vitae, consectetur venenatis nibh. Fusce porttitor tortor lectus, at efficitur diam dictum et. Quisque et suscipit sem. Mauris vulputate orci tellus, non efficitur eros blandit ut. Donec eget hendrerit elit.
If you must transition the element's height then you could offset the effects of the dimensions changing by using a container as a buffer.
var lastScrollY = 0;
var ticking = false;
window.addEventListener('scroll', function(e) {
lastScrollY = window.scrollY;
if ( ! ticking ) {
window.requestAnimationFrame(function() {
console.log( lastScrollY );
if ( lastScrollY > 0 ) {
document.body.classList.add('stuck');
} else {
document.body.classList.remove('stuck');
}
ticking = false;
});
ticking = true;
}
} );
body {
margin: 0;
}
.wrapoffset { /* Make this element sticky instead */
height: 80px;
position: sticky;
top: 0;
width: 100%;
}
.wrap {
background: #666;
text-align: center;
width: 100%;
}
.block {
height: 80px;
width: 80px;
background: red;
display: block;
transition: 0.5s;
}
.stuck .block {
height: 40px;
}
<div class="wrapoffset"> <!-- new element -->
<div class="wrap">
<span class="block"></span>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac lorem a metus tincidunt eleifend id in odio. Nam malesuada hendrerit tristique. Pellentesque id ornare elit, ac lobortis metus. Sed iaculis et nisi et consectetur. Proin pellentesque metus mi, quis fringilla mauris pulvinar et. Vivamus pharetra elit ligula, eu consectetur magna consequat nec. Donec sed enim sit amet augue malesuada varius id a libero. Nullam nec ante id justo elementum congue quis in purus. Integer finibus cursus volutpat. Donec non laoreet ipsum.
Maecenas id venenatis velit, eu feugiat dolor. Vestibulum malesuada erat ut turpis mattis vehicula. Vestibulum sem leo, cursus quis lacinia eu, tincidunt eu velit. Nulla odio elit, tristique vel bibendum vitae, placerat nec eros. Proin auctor id leo sed rutrum. Proin convallis erat sit amet neque aliquam vestibulum. Ut sodales vel nisl eu imperdiet.
Donec a porttitor dui, vitae ullamcorper nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam non elit eu elit blandit hendrerit id ut eros. Duis sagittis elementum ligula eu venenatis. Aenean nunc mauris, dignissim ut venenatis ac, pharetra eget magna. Curabitur elementum enim sed pharetra rhoncus. Praesent sodales at ex at consectetur. Curabitur sed dictum mi, ut eleifend arcu. Nam feugiat risus quis congue porttitor. Maecenas vehicula lorem ultrices ante sollicitudin, placerat sollicitudin dolor fermentum. Aliquam arcu turpis, faucibus vel placerat a, molestie vel lectus. Sed condimentum euismod tincidunt. Mauris odio tortor, luctus id eleifend vitae, aliquet ut libero. Vestibulum vitae placerat turpis. Duis nec facilisis eros. Morbi ipsum arcu, tempus ac massa nec, mollis aliquet lacus.
Phasellus maximus eros quis massa maximus, et mattis tellus cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus interdum, cursus diam ut, posuere purus. Duis non vestibulum nulla, vitae egestas elit. Phasellus venenatis libero in nunc lobortis tempor in vel orci. Praesent varius lacus eleifend, pretium lectus ut, pulvinar arcu. Nunc ornare dolor velit, id pulvinar urna semper eget. Aenean finibus dui vitae dolor ullamcorper finibus. Cras consequat viverra tellus, a accumsan sem viverra sed. Nulla felis tortor, laoreet non tincidunt elementum, tempus ac risus. Sed nibh nisl, ultrices vel iaculis in, fringilla at ipsum. Curabitur metus ligula, tincidunt non arcu eget, ultricies pellentesque ligula. Duis id est posuere, molestie urna non, gravida tortor. Praesent lacinia erat ac diam sagittis, quis faucibus nunc blandit.
Fusce aliquet tincidunt turpis, ut consequat metus consectetur at. Nunc volutpat semper enim, ut finibus orci luctus in. Mauris pharetra consectetur arcu sed pulvinar. Sed cursus fermentum velit, mattis varius ante commodo ac. Fusce erat mauris, sagittis quis eros vitae, consectetur venenatis nibh. Fusce porttitor tortor lectus, at efficitur diam dictum et. Quisque et suscipit sem. Mauris vulputate orci tellus, non efficitur eros blandit ut. Donec eget hendrerit elit.
If you want to optimize the performance even more you can look into using IntersectionObserver with a polyfill instead of listening for events on scroll.
the problem:
I have transparent fixed navbar with some gap (margin-top) and below content, which is located under the navbar while scrolling down globally. The problem is that navbar is transparent and the background of the page is a dynamic slideshow of different images so I can't use z-index and hide it by changing background color or put image same as background..
In conclusion:
Transparent fixed navbar with gap
Dynamic images background
It has to be global scrolling (can't use scrolling for div content)
I'am using bootstrap 3
Drawings:
WRONG: [How its looks now][1]
RIGHT: [How it should be][2]
[1]: http://i.stack.imgur.com/Iwc1h.png
[2]: http://i.stack.imgur.com/f1Sbd.png
Sorry for problems with understanding me, here is code:
http://jsfiddle.net/5myw4e26/
if you're using a position fixed at your navbar you can do a top div empty with float left and a height with the size of your navbar.
I managed to accomplish what you we're trying to do. It's probably not the best solution, but it works.
Using JQuery I calculated when a paragraph (p.content) and the navigation-bar collided.
There's more than enough to finetune, so you can adjust it to your needs.
JQuery
$(document).ready(function() {
$(document).scroll(function() {
$("p").each(function() {
if ($(this).offset().top <= $(document).scrollTop() + 32) {
$(this).css("opacity", "0");
} else {
$(this).css("opacity", "1");
}
});
});
});
Note that the 32 in $(this).offset().top <= $(document).scrollTop() + 32 is the height of the navigation bar.
Example:
$(document).ready(function() {
$(document).scroll(function() {
$("p").each(function() {
if ($(this).offset().top <= $(document).scrollTop() + 32) {
$(this).css("opacity", "0");
} else {
$(this).css("opacity", "1");
}
});
});
});
body {
margin: 0px;
font-family: Arial;
font-size: 12px;
min-height: 2000px;
}
nav {
width: 100%;
height: 32px;
line-height: 32px;
text-align: center;
position: fixed;
top: 0;
border-bottom: 1px solid black;
}
p.content {
margin: 12px 0px 0px 0px;
background: yellow;
}
p:first-of-type {
margin: 44px 0px 0px 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="wrapper">
<nav>
Navigation Bar
</nav>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed dolor metus. Morbi tristique nisl vel lectus rutrum, non ultricies dolor feugiat. Fusce nec dolor in purus consectetur lacinia non sit amet turpis. Donec facilisis tortor mauris, nec vulputate
massa fermentum vel. Praesent in neque quis lacus hendrerit tincidunt sed et dolor. Nullam fermentum, orci at pulvinar imperdiet, lacus libero facilisis ante, sit amet venenatis sem tortor in nibh. Ut ullamcorper porta fermentum. Praesent faucibus,
erat eget iaculis porttitor, purus purus posuere nulla, eget lacinia odio libero in lectus. Vivamus sem ex, commodo ac tortor ut, fringilla vulputate eros. Ut iaculis augue non ipsum porttitor ornare.</p>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis tellus luctus ornare hendrerit. Curabitur hendrerit justo ante. Maecenas scelerisque ligula condimentum, aliquam tortor sit amet, aliquam lacus. Interdum et malesuada fames ac
ante ipsum primis in faucibus. Ut ut augue vel massa tempus laoreet. Nulla porttitor, sem ac aliquet facilisis, purus ligula pulvinar ipsum, quis volutpat enim elit sed ante. Pellentesque quis diam vestibulum, viverra elit at, sollicitudin mi. Vivamus
vehicula ex eu justo feugiat, a ullamcorper nisi commodo. Phasellus sed tortor eget purus mollis tempor at sit amet libero. Fusce tincidunt est est, tristique pretium justo feugiat eget. Donec et lacus vehicula, aliquam sapien a, eleifend tortor.</p>
<p class="content">Vivamus vitae placerat elit. Integer eleifend nibh at purus suscipit rutrum. Aliquam et fermentum mauris. Aenean gravida velit a vehicula aliquet. Duis neque tortor, luctus eget condimentum eget, venenatis eget lorem. Maecenas sed ullamcorper tellus.
Donec euismod bibendum nunc, non ullamcorper neque cursus eget. Curabitur dapibus orci non quam vestibulum ornare. Aenean tincidunt interdum justo faucibus feugiat. Proin molestie lorem ultricies neque consequat, commodo cursus nisl molestie. Donec
gravida viverra nisl, consectetur laoreet libero interdum ac. Vivamus varius vestibulum quam eu rutrum. Pellentesque id rhoncus massa.</p>
<p class="content">Nunc finibus leo mollis efficitur tempus. Suspendisse ac elit lectus. Proin auctor ipsum faucibus arcu cursus congue. Nam rutrum odio non enim euismod auctor id in justo. Ut non sagittis orci, vel tincidunt elit. Mauris odio sem, varius eget tortor
at, commodo pretium massa. Cras sed rhoncus dolor, non dictum sem. Curabitur in imperdiet turpis, in imperdiet mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas erat nisl, sagittis id eleifend ut, consequat eget orci. Aenean
blandit arcu non varius ornare.</p>
<p class="content">Pellentesque molestie consectetur lectus in iaculis. Curabitur efficitur ac nisi vitae eleifend. Morbi semper tristique ornare. Morbi in cursus mauris. Morbi et risus velit. Etiam lobortis commodo dolor, ac pulvinar dolor gravida vel. Donec sollicitudin
metus urna, eu consequat magna vehicula a. Vivamus interdum, enim non consequat ultrices, lacus enim vehicula ante, vitae tristique tellus nibh sit amet eros. Aliquam consequat eu orci id rutrum. Donec lacus eros, eleifend et viverra vitae, congue
at turpis. Quisque rhoncus fermentum ex sed lobortis. Fusce luctus, lorem vitae condimentum gravida, nibh tortor elementum nulla, id auctor nisl ex eu lectus. Donec auctor ligula sem, et porttitor neque eleifend vitae. Aliquam felis lacus, sollicitudin
laoreet dui mollis, scelerisque auctor metus.</p>
</div>
I have a fixed header function like below. I would like to change dynamically "100" value while window resizing.
I was trying to wrap everything in sth like "if (screen.width >= 1200)" or "jQuery(window).on('resize', function ()" but this kind of stuff is working only with page refresh.
jQuery(document).ready(function($) {
var $window = $(window),
$stickyEl = $('.tabsmenu > ul'),
elTop = $stickyEl.offset().top - 100;
$window.scroll(function() {
if ($window.scrollTop() < 900) {
$stickyEl.toggleClass('sticky', $window.scrollTop() > elTop);
} else {
$stickyEl.removeClass('sticky');
}
});
});
Any tips?
This may not be perfect but it's what I think what you want to do and the way I would do it. This just gets the scroll value and then does some math to calculate how much it needs to change. I have added a bunch of content to let it scroll.
window.onload = function() {
$("#everything").scroll(function() {
var startAt = 40; //How many pixles scrolled to start effect, 0 would match link
if ($("#everything").scrollTop() >= startAt) {
var scroll = $("#everything").scrollTop(),
total = 0, // go to this value
distance = 40, //distance to shrink
value = (scroll < distance) ? total : total + (distance - (scroll - startAt));
$("#head").css("height", value); //change #head to what ever you want to shrink
} else {
$("#head").css("background-color", value);
}
});
}
html,
body {
overflow: hidden;
/* Disables regular scrolling */
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#everything {
overflow: scroll;
/* enables content to scroll */
position: relative;
width: 100%;
height: 100%;
padding-top: 40px;
}
#head {
width: 100%;
height: 40px;
background-color: red;
position: fixed;
top: 0px;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="everything">
<div id="head">header</div>
<span>
Text Following text is so the page can scroll: <br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer porta velit eu turpis imperdiet congue. Morbi nec mi ipsum. Nam eu nunc in lorem sagittis feugiat a quis nisl. Donec suscipit leo quis magna egestas, id convallis leo gravida. Curabitur finibus lectus ut metus feugiat, eu tincidunt eros tempor. Fusce facilisis nunc vulputate, posuere velit nec, ultrices diam. Vestibulum aliquam velit in lectus imperdiet, vitae condimentum lectus finibus. Aliquam ac arcu eget velit molestie rhoncus. Etiam rhoncus, tellus nec lacinia porta, diam lorem ultrices sem, et dignissim ipsum augue non augue. Suspendisse tincidunt felis sit amet orci accumsan, at ornare tellus viverra. Nam viverra nulla in urna elementum ornare.Sed interdum nisi libero, id porta turpis consectetur vitae. Curabitur nunc ex, interdum eget hendrerit maximus, faucibus non est. Etiam scelerisque condimentum eleifend. Integer ac ligula eget magna porta tristique at eu neque. Sed venenatis ipsum non metus sodales finibus. Suspendisse nec nunc lobortis ligula venenatis tristique. Suspendisse aliquam leo elit, et pretium ipsum tempor sed. Maecenas tincidunt dictum leo sit amet accumsan. Nullam eu viverra nulla. Aenean vehicula tellus a mauris malesuada interdum. Sed libero lacus, consectetur at condimentum vel, egestas vitae nisl.Mauris facilisis tincidunt magna, at gravida elit. Cras molestie eros sed tincidunt ultricies. Pellentesque eleifend egestas orci, sit amet condimentum nisl semper eleifend. Sed ipsum elit, aliquet nec lacinia a, maximus eu dolor. Quisque finibus efficitur odio gravida convallis. Vivamus nec velit in est ornare luctus at a risus. In hac habitasse platea dictumst. Proin condimentum eget est non posuere. Vivamus ante quam, bibendum in tincidunt ut, egestas sed mauris. Nunc non interdum nibh, nec ornare tellus. In interdum elit nisi, a interdum est tempor id. Cras a elit ut purus ornare mollis sit amet ut est. Cras ut ex sed neque lacinia accumsan quis aliquet turpis. Quisque nisl nunc, pretium sed lectus pretium, lacinia ornare magna. Curabitur sit amet felis turpis. Morbi nisi mi, mattis quis tempor ut, accumsan nec ex.
</span>
</div>
</body>
</html>
I want to make an scrollable div that scrolls down when the user hovers another div. The content inside the scrollable div will change (it's gonna be only text) so I can't set up an absolute height value for that DIV, this is why div's height is 'auto'.
I have come into a solution that works when I set up an absolut height value on '.post-right' div's CSS, but it returns no value if div's height is 'auto' just I like I need it to be.
I've tried putting jQuery block of code on the (document).ready function as well, result is exactly the same.
Any ideas? Thank's in advance.
HTML CODE:
<div class="post-right-cont">
<div class="post-right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquam libero ut nisi consectetur pretium. Donec auctor auctor mauris, in tempor mauris blandit et. Aliquam nibh felis, tincidunt a auctor vel, feugiat at enim. Duis faucibus porta mi ut fringilla. Pellentesque eleifend erat a tellus aliquam sodales. Nullam lorem tellus, accumsan quis laoreet id, luctus et urna. Curabitur eleifend tellus non orci ullamcorper adipiscing. Integer est tellus, bibendum at ultricies a, viverra at orci. Curabitur porta tincidunt nunc, at placerat ipsum malesuada et. Vivamus et est purus, id suscipit tortor. Curabitur turpis metus, dapibus et consectetur non, tincidunt in est. Vestibulum nisl libero, sodales sit amet auctor eu, congue at velit. Vivamus et erat massa, nec viverra risus. Fusce iaculis dolor vel augue ornare accumsan.<br/><br/>
Quisque a metus arcu. Suspendisse hendrerit commodo justo in sagittis. Phasellus a scelerisque quam. Fusce lacinia lacinia justo. Duis id hendrerit enim. Sed eleifend eros et turpis rutrum consectetur. Maecenas pulvinar volutpat odio, non imperdiet augue pretium quis. Proin rutrum, est vitae auctor dapibus, diam dolor rutrum libero, sed feugiat metus turpis sed mauris. Sed eleifend dolor arcu. Cras laoreet nibh convallis magna congue sit amet consequat tortor porttitor. Duis et mauris non lorem consectetur luctus. Aliquam mollis sem sit amet tortor iaculis egestas. Duis tincidunt pellentesque leo, nec vulputate turpis dapibus sit amet. Aliquam rhoncus luctus orci, et aliquet eros porttitor in. Etiam arcu eros, viverra tristique tincidunt vel, facilisis et mauris.<br/><br/>
Morbi congue auctor luctus. Sed nisl dui, varius id ornare et, tincidunt sit amet enim. Aliquam egestas ultricies nisl, id condimentum erat fermentum quis. Morbi lectus nunc, aliquam volutpat egestas quis, iaculis a nulla. Pellentesque fermentum mauris at libero pulvinar viverra. Aliquam a ante orci, a luctus purus. Vivamus ut est ut mauris pulvinar mattis ac et magna. Aenean congue dictum lectus at suscipit. Suspendisse interdum, erat pulvinar gravida vulputate, mi mauris feugiat justo, at euismod augue sapien eu sapien. Praesent at quam purus. In hac habitasse platea dictumst. Fusce vel tellus a massa tempor volutpat a at magna. In eu enim odio. Quisque bibendum tortor est. Phasellus a scelerisque quam. Fusce lacinia lacinia justo. Duis id hendrerit enim. Sed eleifend eros et turpis rutrum consectetur. Maecenas pulvinar volutpat odio, non imperdiet augue pretium quis. Proin rutrum, est vitae auctor dapibus, diam dolor rutrum libero, sed feugiat metus turpis sed mauris. Sed eleifend dolor arcu.
</div>
<div class="scroll-down"></div>
<div class="scroll-up"></div>
</div>
CSS:
.post-right-cont {
width: 540px;
height: auto;
overflow: hidden;
position: relative;
}
.post-right {
position: absolute;
top: 0;
left: 20px;
height: auto;
width: 480px;
padding-top: 40px;
}
jQuery:
$(window).load(function() {
// SCROLL POST
// EDIT - post-right-cont height was set up before. I just past it here now.
var wHeight = $(window).height();
$('.post-right-cont').css('height', wHeight - 36);
if ($('div.post-right').height() > $('.post-right-cont').height()) {
$('div.scroll-down').hover(function() {animateContent('down');}, function() {
$('div.post-right').stop();
});
$('div.scroll-up').hover(function() {animateContent('up');}, function() {
$('div.post-right').stop();
});
}
function animateContent(direction) {
var containerHeight = $('.post-right-cont').height();
var textHeight = $('div.post-right').height();
var animationOffset = textHeight - containerHeight;
if (direction == "up") {
animationOffset = 0;
}
$('div.post-right').animate({"top" : -animationOffset + "px" }, 8500);
}
});
$('.post-right-cont').height() will return a value 0 because you have wrapped just one item inside, which have absolute positioning, so the absolute positioned element will not increase the size of .post-right-cont. So jQuery returns the correct value - 0. The height of .post-right will not increase the height of .post-right-cont because absolute positioned elements do not increase the height or width of their wrapping tag.