Sidebar that becomes fixed when you touch navbar

Question

Sidebar that becomes fixed when you touch navbar

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

How are they? I'm trying to make a sidebar (which also fulfills the form role) that at the beginning of the scrolling is fixed when hitting the navbar, which is fixed at the top. It works for me, but when it is fixed there is a small jump, it does not happen "naturally".

$(document).ready(function() {
  var sidebar = $('#side');
  var nav = $('#navbar');
  var top = sidebar.offset().top - parseFloat(sidebar.css('margin-top'));
  var navBar = nav.offset().top - parseFloat(nav.css('height'));

  $(window).scroll(function(event) {
    var y = $(this).scrollTop();

    if ((y >= top) && (y >= navBar)) {
      sidebar.addClass('fixed');
    } else {
      sidebar.removeClass('fixed');
    }
  });
});

.cont {
  position: absolute;
  margin-top: 20px;
}

.fixed {
  position: fixed;
  top: 114px;
  margin-top: 0px;
}

.cont,
.sidebar {
  margin-top: 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-3 custom_width">
  <div id="side" class="cont">
    <div style="background-color:#fff;height:250px;" class="sidebar">
      <h1 class="remove_margin">FORM</h1>
      <form id="crmform" role="form">
        <div class="form-group">
          <input placeholder="Name" class="form-control crm_item required crm_name" />
        </div>
        <div class="form-group">
          <input placeholder="Last Name" class="form-control crm_item required crm_lastname" />
        </div>
        <div class="form-group">
          <input type="email" placeholder="Email" class="form-control crm_item required crm_email" /><span class="glyphicon, glyphicon-warning-sign, form-control-feedback"></span>
        </div>
        <div class="form-group">
          <input placeholder="Phone" onKeyPress="phone_change()" onKeyUp="phone_change()" class="form-control crm_item required crm_phone" />
        </div>
        <div class="form-group">
          <input placeholder="Company" class="form-control crm_item required crm_company" />
        </div>
        <div class="form-group"> <a type="submit" class="btn form-control submit disabled crm_submit">Submit</a></div>
      </form>
    </div>
  </div>
</div>

EDITION 1 I know that I must add to this element var y = $(this).scrollTop(); the height of the nav. I'm missing that, because at this moment I only detect the height of the screen.

jquery html css3

asked by TheWoodStudio 21.09.2017 в 20:46

source

2 answers

0

Try placing the property transition: all 0.5s to .fixed

.fixed {
    position: fixed;
    top: 114px;
    margin-top: 0px;
    transition: all 0.5s
}

I hope you serve, greetings!

answered by 22.09.2017 в 00:09

Drupal 7 does not catch me css file in form how to create the body of a thread and use it in google test

score 0 · Accepted Answer

I could solve it by measuring the height of the nav with .outerHeight() , and adding it to $(this).scrollTop() .

$(document).ready(function () {
    var $sidebar = $('#side');
    var $nav = $('#navbar');
    var top = $sidebar.offset().top - parseFloat($sidebar.css('margin-top'));

    $(window).scroll(function (event) {
      var y = $(this).scrollTop() + $nav.outerHeight(true);

      if (y >= top) {
        $sidebar.addClass('fixed');
      } else {
        $sidebar.removeClass('fixed');
      }
    });
});

Thanks to everyone!