宽度变化-粘性Div

Question

I've implemented a sticky contact form, which works great. But there is an annoying feature where it changes the width. I've tried all sorts of width properties such as auto, inherit, initial but still cannot manage to get the width to stay the same as it starts to scroll down!

Here is the Javascript

<!-- Javascript Files -->
<script type="text/javascript">
$(window).load(function(){
$(function() {
  var a = function() {
    var b = $(window).scrollTop();
    var d = $("#scroller-anchor").offset().top;
    var c=$("#scroller");
    if (b>d) {
      c.css({width:"initial",position:"fixed",top:"30px"})
    } else {
      if (b<=d) {
        c.css({width:"100%",position:"relative",top:""})
      }
    }
  };
  $(window).scroll(a);a()
});
});//]]> 
</script>

Here is the scroller div:

<div id="scroller-anchor"></div> 
  <div id="scroller" style="margin-top:10px;"> 

There is the contact form below this, but not needed for the example code!

Any help would be great, spent far to long on this with no success!

Answer 1

We'll store the initial width of the contact form, and assign the same width once you scroll and the div is fixed positioned.

<script type="text/javascript">
$(window).load(function(){
    $(function() {
      var a = function() {
        var $win = $(window);
        var b = $win.scrollTop();
        var d = $("#scroller-anchor").offset().top;
        var c=$("#scroller");

        //store initial width
        var init_width = c.width();

        if (b>d) {
          c.css({width:init_width,position:"fixed",top:"30px",right:($win.width()-c.offset().left-init_width)})
        } else {
          if (b<=d) {
            c.css({width:"auto",position:"relative",top:"auto",right:"auto"})
          }
        }
      };
      $(window).scroll(a);a()
    });
});//]]> 
</script>

Notes about this: it will need to be readjusted anytime the width of the browser changes, and could go over the content if a user scrolls and then resizes the browser window to be smaller.