Barrosy Barrosy - 7 months ago 13
HTML Question

How do I stop a "fixed" element using following code?

For my current project I want to make a sort of fixed element in my DOM.
I am not using

position: fixed
because the element will lose its existence within the DOM and thus its original position (which in my opinion only makes things look worse). I made the element behave like a fixed element by just adding/removing
margin-top: somevalue
to the scrollable element, everytime when the user scrolls and the code I use was made possible within the JavaScript. Using this method also adds a nice looking animation to this whole "interaction".

The problem I am experiencing is that when the (browser) window has such a small height, that the element will reach for the footer, it will expand the container, body or whatever parent is on it. How do I prevent this from happening?

I made a JSFiddle per example of this issue.



$(document).ready(function() {
var topPadding = 10;
//Set the scrollable offset before starting the scroll
var scrollableTopOffset = $(".scrollable").offset().top;

$(window).scroll(function() {
/* When scrolling, determine wether the browser window still contains
scrollable: */
if (scrollableTopOffset < $(window).scrollTop()) {
//Code when scrollable is within the browser window...
//$(".shopping-cart").addClass("scrollable-fixed");
$(".scrollable").stop().animate({
marginTop: $(window).scrollTop() - scrollableTopOffset + topPadding
});
} else {
//Code when scrollable is not within the browser window...
//$(".shopping-cart").removeClass("scrollable-fixed");
$(".scrollable").stop().animate({
marginTop: 0
});
}
});
});

.some-content-block {
height: 150px;
margin-bottom: 5px;
background-color: red;
}
.scrollable {
height: 75px;
background-color: cyan;
}
footer {
height: 200px;
background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" style="background-color: blue;">
<div class="row">
<div class="col-md-12">
<div class="some-content-block">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-10 col-sm-10 col-md-10">
<div class="col-md-4">
<div class="some-content-block">
</div>
</div>
<div class="col-md-4">
<div class="some-content-block">
</div>
</div>
<div class="col-md-4">
<div class="some-content-block">
</div>
</div>
<div class="col-md-4">
<div class="some-content-block">
</div>
</div>
<div class="col-md-4">
<div class="some-content-block">
</div>
</div>
<div class="col-md-4">
<div class="some-content-block">
</div>
</div>
<div class="col-md-4">
<div class="some-content-block">
</div>
</div>
</div>
<div class="col-xs-2 col-sm-2 col-md-2">
<div class="scrollable">
</div>
</div>
</div>
</div>
<footer></footer>





Edit: Here is my fiddle updated with the answer of SamGhatak: JSFiddle

Answer

I think I found a solution here:

https://jsfiddle.net/rv4mg8uq/2/

Added this code there:

if(($('footer').offset().top -scrollableTopOffset +topPadding)<$(window).scrollTop()){
        //do nothing
}