I would like to know how to make a div fixed on the side side by scrolling the page down.
What I want to do is exactly like the side newsletter from this page ... By scrolling down you will better understand what I am talking about.
I'm using wordpress and have tried using some javascript and css , but not without much success.
The solution that served me was a mix of Dexxtz's response to Wagner's. So you got this scroll function with fadin and fadeout.
For the first time I had implemented the dexxtz code, but when loading the page the div box appeared first at the top. So I made a change based on what Wagner posted.
You can see the commented code and simulate right here or jsfiddle :
$(function () {
//incluso essa variavel para setar atributos do css depois
var elemento = $('.element');
$(window).scroll(function () {
//distancia que o scroll devera rolar para aparecer o box da div
if ($(this).scrollTop() > 300) {
//bloco incluso para setar o css
elemento.css({
'position': 'fixed',
'bottom': '15%'
});
$('.element').fadeIn();
} else {
$('.element').fadeOut();
}
});
});body {
height: 5000px;
font: 13px verdana, sans-serif;
}
div {
margin: 10px;
}
.other {
width: 200px;
padding: 3em;
background: #f9f9f9;
border: 1px solid #ddd;
border-top: #4898c6 3px solid;
text-align: center;
}
.element {
width: 200px;
padding: 3em;
background: #f9f9f9;
border: 1px solid #ddd;
border-top: #dc0000 3px solid;
text-align: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="other">Outros conteúdos</div>
<div class="other">Outros conteúdos</div>
<div class="other">Outros conteúdos</div>
<div class="other">Outros conteúdos</div>
<div class="other">Outros conteúdos</div>
<div class="other">Outros conteúdos</div>
<div class="element">Conteúdo</div>I think this resolves
<body style="height:2000px">
<style type="text/css">
.newsletter{position:fixed; bottom:15%; left:10%; width:220px; height:300px; background:#000;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><scripttype="text/javascript">
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 300) {
$('.newsletter').fadeIn();
} else {
$('.newsletter').fadeOut();
}
});
});
</script>
<div class="newsletter"></div>
</body>
You just have to say the desired height, in this case 300px.
Hello, you can do this by capturing the scroll event and checking if the scrollTop is larger than the size you want.
I would use the following code
$(function(){
var jElement = $('.element');
$(window).scroll(function(){
if ( $(this).scrollTop() > 300 ){
jElement.css({
'position':'fixed',
'top':'300px'
});
}else{
jElement.css({
'position':'relative',
'top':'auto'
});
}
});
});
Where we save the variable of our element with jElement , we check when the user scrolls the page with $(window).scroll(); and we check if the scroll is greater than 300 (you can change to any value you want) with $(this).scrollTop(); See a working example here:
link