There is a div (#callback) that loads asynchronously via ajax upon submit, for updating or deleting an item. It appears as the green message box at the top of the page. Click here to see image and this is how it looks when "scrolling": Check out the scrolling image here
I currently have it set to stay within the visible range of the screen with a "fix on scroll" effect. However, I don't want it to be fixed at the very top of the document unless the scroll offset reaches it. At that point, I want it to stay fixed while scrolling.
My goal is to position it just below the nav-bar instead of on top of it if the scroll offset hasn't reached it yet.
Below is the JavaScript code:
// Notification-Message Position
$(window).scroll(function(e){
var el = $('#callback');
if ($(this).scrollTop() > 200 && $el.css('position') != 'fixed'){
$('#callback').css({'position': 'fixed', 'top': '0px'});
}
if ($(this).scrollTop() < 200 && $el.css('position') == 'fixed'){
$('#callback').css({'position': 'static', 'top': '0px'});
}
}); //END Notification-Message Position
And here's the CSS code:
/*FIXED ON SCROLL*/
#callback{
position: fixed;
top: 0;
width: 100%;
z-index: 100;
}
Apologies for the basic question, as I'm still learning.