$(document).ready(function() {
//show hide button on scroll
$('.box').hide();
$(window).scroll(function() {
$elementToTrack = $('#box');
$elementPlaceholder = $('#marcador');
$theWindow = $(window);
thresold = 0;
windowTop = $theWindow.scrollTop();
windowBottom = windowTop + $theWindow.height();
elementPlaceholderTop = $elementPlaceholder.offset().top;
elementPlaceholderBottom = elementPlaceholderTop + $elementPlaceholder.height();
placeholderFromBottom = elementPlaceholderTop <= windowBottom + thresold;
placeholderFromTop = elementPlaceholderBottom >= windowTop - thresold;
if (placeholderFromBottom && placeholderFromTop) {
// $elementToTrack.addClass('fShow')
$elementToTrack.fadeIn();
} else {
// $elementToTrack.removeClass('fShow')
$elementToTrack.fadeOut();
}
/*
if ($(this).scrollTop() > 900 && $(this).scrollTop() < 3000) {
$('.box').fadeIn();
} else {
$('.box').fadeOut();
};
//*/
});
$('#dale').on('click', function() {
$('.container').toggleClass('adelgamate');
$(window).scroll();
});
});
.container {
/* height: 5000px;*/
background-color: red;
}
.box {
height: 100px;
width: 200px;
background-color: blue;
position: fixed;
}
section {
border-bottom: 1px dotted white;
}
.adelgamate {
width: 320px;
}
#dale {
position: fixed;
top: 30px;
right: 30px;
}
#marcador {
background: #fafafa;
}
div {
font-family: verdana;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
<div class='box' id='box'></div>
<h1>Las secciones</h1>
<section>
<h2>una seccion</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed iaculis sit amet ex in volutpat. Ut cursus ex id tincidunt euismod. Donec volutpat nulla a laoreet condimentum. Mauris sit amet lorem neque. Suspendisse eget diam finibus risus semper gravida.
Donec dapibus ipsum ac turpis accumsan laoreet. Etiam varius nisl diam, vitae finibus quam lobortis id. Vestibulum sagittis placerat felis, vel placerat augue porta sed. Ut consectetur est eu est rhoncus, vel faucibus purus interdum.</p>
</section>
<section>
<h2>otra seccion</h2>
<p>Curabitur lorem odio, convallis vitae dapibus a, tempus vitae elit. Mauris sodales tempor tellus, eget eleifend felis tristique a. Suspendisse sed urna eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Nullam vel tincidunt mauris, et tempus nunc. Vestibulum sed tempus sem. Donec nec ullamcorper felis. Maecenas ornare sit amet diam sit amet commodo. Duis finibus convallis dolor id luctus. Phasellus pellentesque est nunc, fermentum imperdiet quam
tristique sit amet.</p>
</section>
<section>
<h2>otra seccion</h2>
<p>Curabitur lorem odio, convallis vitae dapibus a, tempus vitae elit. Mauris sodales tempor tellus, eget eleifend felis tristique a. Suspendisse sed urna eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Nullam vel tincidunt mauris, et tempus nunc. Vestibulum sed tempus sem. Donec nec ullamcorper felis. Maecenas ornare sit amet diam sit amet commodo. Duis finibus convallis dolor id luctus. Phasellus pellentesque est nunc, fermentum imperdiet quam
tristique sit amet.</p>
</section>
<section id="marcador">
<h2>otra seccion</h2>
<strong>Cuando pase por esta sección mostrame el cuadrado, ocultalo cuando termine de pasar. </strong>
<p>
Curabitur lorem odio, convallis vitae dapibus a, tempus vitae elit. Mauris sodales tempor tellus, eget eleifend felis tristique a. Suspendisse sed urna eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam
vel tincidunt mauris, et tempus nunc. Vestibulum sed tempus sem. Donec nec ullamcorper felis. Maecenas ornare sit amet diam sit amet commodo. Duis finibus convallis dolor id luctus. Phasellus pellentesque est nunc, fermentum imperdiet quam tristique
sit amet.</p>
<strong>Cuando pase por esta sección mostrame el cuadrado, ocultalo cuando termine de pasar. </strong>
</section>
<section>
<h2>otra seccion</h2>
<p>Curabitur lorem odio, convallis vitae dapibus a, tempus vitae elit. Mauris sodales tempor tellus, eget eleifend felis tristique a. Suspendisse sed urna eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Nullam vel tincidunt mauris, et tempus nunc. Vestibulum sed tempus sem. Donec nec ullamcorper felis. Maecenas ornare sit amet diam sit amet commodo. Duis finibus convallis dolor id luctus. Phasellus pellentesque est nunc, fermentum imperdiet quam
tristique sit amet.</p>
</section>
<section>
<h2>otra seccion</h2>
<p>Curabitur lorem odio, convallis vitae dapibus a, tempus vitae elit. Mauris sodales tempor tellus, eget eleifend felis tristique a. Suspendisse sed urna eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Nullam vel tincidunt mauris, et tempus nunc. Vestibulum sed tempus sem. Donec nec ullamcorper felis. Maecenas ornare sit amet diam sit amet commodo. Duis finibus convallis dolor id luctus. Phasellus pellentesque est nunc, fermentum imperdiet quam
tristique sit amet.</p>
</section>
<section>
<h2>otra seccion</h2>
<p>Curabitur lorem odio, convallis vitae dapibus a, tempus vitae elit. Mauris sodales tempor tellus, eget eleifend felis tristique a. Suspendisse sed urna eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Nullam vel tincidunt mauris, et tempus nunc. Vestibulum sed tempus sem. Donec nec ullamcorper felis. Maecenas ornare sit amet diam sit amet commodo. Duis finibus convallis dolor id luctus. Phasellus pellentesque est nunc, fermentum imperdiet quam
tristique sit amet.</p>
</section>
<section>
<h2>otra seccion</h2>
<p>Curabitur lorem odio, convallis vitae dapibus a, tempus vitae elit. Mauris sodales tempor tellus, eget eleifend felis tristique a. Suspendisse sed urna eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Nullam vel tincidunt mauris, et tempus nunc. Vestibulum sed tempus sem. Donec nec ullamcorper felis. Maecenas ornare sit amet diam sit amet commodo. Duis finibus convallis dolor id luctus. Phasellus pellentesque est nunc, fermentum imperdiet quam
tristique sit amet.</p>
</section>
</div>
<button id="dale">respooonsiiiv</button>