javascript - How to stick the bottom part of a div to top of the screen when scrolling down? -
imagine div has height of 300 px, , @ bottom there div nested height of 100 px. i'd freeze (stick top) 100 px div, background properties (eg. background color) set in container div.
body { padding: 0; margin: 0; border: 0; } #first { background: #121212; width: 100%; height: 300px; color: #ffffff; } #nonsticky { height: 200px; } #sticky { background: rgba(255, 255, 255, 0.3); height: 100px; } #second { background: #cecece; width: 100%; } p { padding: 15px 30px; margin: 0; }<div id="first"> <div id="nonsticky"> <p>this div should scroll away when scrolling down page.</p> </div> <div id="sticky"> <p>this div should stick top of screen when scrolling down page. however, "first" div should stick, background properties set there.</p> </div> </div> <div id="second"> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. aenean accumsan pharetra nibh in lobortis. class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. nulla sodales dui accumsan accumsan. ut vitae diam turpis. sed eu ante non quam cursus cursus ac nec nunc. mauris bibendum massa et turpis semper porttitor. integer consectetur dignissim ligula quis semper. praesent lorem erat.</p> <p>donec eleifend gravida massa, sed hendrerit nibh laoreet et. pellentesque dapibus, metus sed pretium sodales, arcu dui suscipit felis, ac dignissim quam ex bibendum mi. sed ut ornare enim. pellentesque condimentum pulvinar metus, egestas varius justo commodo at. praesent sollicitudin ultrices tortor non fermentum. vestibulum ultrices justo sit amet consequat auctor. nullam tristique odio felis, vel dapibus tortor ornare a. cras quis lectus iaculis, mattis ipsum dignissim, pharetra urna. integer lobortis tellus turpis, in molestie ante condimentum sed. maecenas bibendum augue non libero porta, sed congue lorem varius.</p> <p>nam justo massa, sollicitudin @ purus non, viverra lacinia mi. morbi nisi ipsum, vestibulum eget hendrerit vel, placerat vitae velit. suspendisse enim in massa aliquet lacinia vel quam. in luctus, ligula fermentum mattis semper, est neque tincidunt neque, faucibus elementum lectus odio urna. etiam suscipit augue eu dui tempus condimentum ac sed ligula. aliquam erat volutpat. nulla interdum ante @ nunc viverra, eget ullamcorper justo sodales. duis venenatis lectus @ felis varius, accumsan sodales diam rutrum. integer lobortis ante nisl, vel dapibus lacus finibus semper. pellentesque nec semper ipsum. in eu purus rhoncus, dictum arcu volutpat, mollis nisi. phasellus metus mi, aliquet sed ultricies a, viverra sit amet turpis. duis vestibulum vitae eros @ porttitor. pellentesque aliquam est quis massa suscipit interdum. donec urna magna, commodo in condimentum a, rhoncus in enim. donec mattis magna sed libero gravida, vulputate condimentum lacus pulvinar.</p> <p>sed mattis semper tellus in imperdiet. suspendisse vel faucibus justo, lobortis vulputate ex. sed malesuada porta ullamcorper. nullam mattis metus ac nunc faucibus, id vulputate ex tincidunt. nunc sagittis, ligula in ullamcorper dignissim, massa arcu elementum quam, rutrum mollis ante ligula sit amet massa. suspendisse finibus commodo elit, id lacinia mauris cursus eu. aliquam luctus nisi sit amet massa fermentum iaculis. nulla porttitor ex id faucibus mollis. mauris suscipit gravida ante eu ultrices. nullam dictum tellus. pellentesque ac magna quam. quisque varius ac odio eget gravida. donec aliquam libero mi, in euismod urna condimentum nec. integer imperdiet tortor et velit rutrum tempus.</p> <p>proin rutrum turpis purus, ac ullamcorper tellus tincidunt id. quisque pretium pulvinar luctus. fusce viverra purus id ipsum mollis accumsan non @ purus. aenean non ultrices mi. sed ante mi, gravida tempus efficitur at, tempor in orci. praesent molestie justo lectus, @ euismod urna consectetur eget. aliquam bibendum, nibh ut semper rhoncus, ligula magna ultrices turpis, @ auctor neque tellus nec tellus. cras dictum @ lacus et ullamcorper. nulla in molestie augue. mauris turpis ligula, porttitor sed congue sit amet, mollis ac mauris. aliquam rhoncus nec leo quis condimentum. morbi tempor cursus sapien vel luctus. sed tincidunt nibh quis quam feugiat mattis. integer ac ante maximus, pretium augue vel, eleifend arcu. vivamus augue nisl, pulvinar sit amet eleifend vitae, mattis rhoncus nibh. donec sed luctus tellus, in venenatis velit.</p> </div>thank in advance!
a possible solution, using jquery:
$first = $('#first'); $sticky = $('#sticky'); $(window).scroll(function() { $first.toggleclass('fixed', $(window).scrolltop() > $first.height() - $sticky.height()) .css('top', $(window).scrolltop() - $first.height() + $sticky.height()); }); the css:
.fixed{ position: relative; top: 0; left: 0; width: 100%; }
Comments
Post a Comment