How can i give space between navbar fixed with div

How can i give space between navbar fixed with div

Hello Guys i'm creating website that has feature one page, i have been figure it and succesfully scroll and fixed the nav bar, but now i face problem that when i click the href page scroll go away not as wish, i mean in this issue my page go the top it make not good looking for user, My wish now how can i give some space or height between my navbar and div, Thanks 


this is my jquery 
  1. // for fixed menu
  2. $(document).ready(function() {
  3.   $(window).scroll(function () {
  4.       console.log($(window).scrollTop())
  5.     if ($(window).scrollTop() > 500) {
  6.  $('#nav_bar').addClass('navbar-fixed');
  7. }
  8.     if ($(window).scrollTop() < 500) {

  10.       $('#nav_bar').removeClass('navbar-fixed');
  11.     
  12.     }
  13.   });
  14. });



  18. //for click href
  20. jQuery(document).ready(function(){
  21. jQuery('a[href^="#"]').click(function(e) {
  22. jQuery('html,body').animate({
  23. scrollTop: jQuery(this.hash).offset().top}, 800);
  24. return false;
  25. e.preventDefault();
  26. });
  27. });