html - changing margin-top of element while scrolling ,javascript -
i want attach element bottom of navbar navbar fixed so in top when scroll problem how change margin-top of element top bottom of nav bar .. , bottom fixed .. (it hidden if scoll lot ) heigth of element smaller when scroll
here did
$(document).on('scroll', function (e) { $('.imagebleu').css('opacity', ($(document).scrolltop() / 500)); $('.imagebleu').css('margin-top', ($('.navbar').heigh()+$(document).scrolltop())); });
if need more code post here link page
http://rechmed.byethost9.com/android_connect/
the part contain text nav bar , other part .imagebleu element have same opacity , because element under navbar navbar opacity doesn't same it
so want add margin changes scrolling fix element on bottom of navbar
thank much
i did solution based on layers (with z-index)
.imagebleu { background-color: #3498db; border-color: transparent; opacity: 0; height: 100%; width:100%; margin-top:50px; position: fixed; right: 0; left: 0; z-index:3; }
the margin-top:50px heigh pf navbar ,so element right under nav bar : 0px between them
position fixed made element cover page, added z-index make element between content of page , paralax image
something :
navbar>content>this element>paralaximage (the z-index)
the element when scrolling hide parallax image, , content hide "element"(.imagebleu) ,but no 1 hide navbar
i update website can see difference
rechmed.byethost9.com/android_connect
Comments
Post a Comment