CODEWITHSUNDEEP
javascriptjqueryhtmlcss
theconfusedbroom
theconfusedbroom

Reputation: 57

fix on scroll for div - how do i make the div appear just below the nav-bar instead of at the top of the document

I have this div (#callback) which is asynchronously loaded via ajax upon submit, either for updating or deleting an item. It is the green message box you see at the top of the page http://i1379.photobucket.com/albums/ah126/conchairtoe/1_zpsefd13e23.png and heres when it's "scrolling" along: http://i1379.photobucket.com/albums/ah126/conchairtoe/2_zps6b0c658b.png

i currently have it so that it remains within the visible range of the screen with the "fix on scroll" effect, however, I do not want it to be situated at the very top of the doc unless the scroll offset reaches it, at which point i want it to remain fixed while I scroll.

I want it to be situated just below the nav-bar, instead of superimposed upon it, when the scroll offset hasn't yet reached it.

Heres the JS:

// 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:

    /*FIXED ON SCROLL*/
#callback{

    position:fixed;
    top:0;
    width:100%;
    z-index:100;

}

Sorry for the stupid question, but I'm very new at this.

Upvotes: 1

Views: 226

Answers (3)

Ahosan Karim Asik
Ahosan Karim Asik

Reputation: 3299

Try this: only css:

 #callback {
  height: 30px;
  position: fixed;
  right: 0;
  top: 0;
  width: calc(100% - 250px);
  z-index: 100;
   background:red;
}
<div style="height:560px" >
  <div style="float:left;margin:10px 10px 10px 0">
    <input type="submit" name="send_new" value="Send" class="send_button" />
  </div>
  <div id="callback">
    message
  </div>
  <div id="save_status" style="float:left;padding: 15px 0px;">sdd</div>
</div>

Upvotes: 0

Imran Bughio
Imran Bughio

Reputation: 4941

Try to change your JS code to the following:

JS:

$(window).scroll(function(e){ 
    var el = $('#callback'); 
    if ($(this).scrollTop() > 200){ 
        $('#callback').css({'top': '75px'}); /* Assuming 75 is the height of you navbar. */
    }
    if ($(this).scrollTop() < 200){
        $('#callback').css({'top': '0px'}); 
    }
});

Upvotes: 0

Afzal Ahmad
Afzal Ahmad

Reputation: 626

Use this,

$(window).scroll(function(e){ 
                var el = $('#callback'); 
                if ($(this).scrollTop() > 200 && $el.css('position') != 'fixed'){ 
                    $('#callback').css({'position': 'absolute', 'top': '0px'}); 
                }
                if ($(this).scrollTop() < 200 && $el.css('position') == 'fixed'){
                    $('#callback').css({'position': 'static', 'top': '0px'}); 
                } 
            }); //EN

and in css as well,

   /*FIXED ON SCROLL*/
#callback{

    position:absolute;
    top:0;
    width:100%;
    z-index:100;

}

Upvotes: 1

Related Questions