2. <div class="nav-placeholder"></div>
3.     <nav class="nav-bar" role="navigation" >
4.       <div class="wrapper">
5.         <div class="medium-down--hide">
6.           {% comment %}
7.             List out your main-menu linklist (default)
8. 
   
9.             More info on linklists:
10.               - http://docs.shopify.com/themes/liquid-variables/linklists
11.           {% endcomment %}
12.           <!-- begin site-nav -->
13.           <ul class="site-nav" id="AccessibleNav">
14.             {% for link in linklists.main-menu.links %}
15.               {% comment %}
16.                 Create a dropdown menu by naming a linklist the same as a link in the parent nav
17. 
    
18.                 More info on dropdowns:
19.                   - http://docs.shopify.com/manual/your-website/navigation/create-drop-down-menu
20.               {% endcomment %}
21.               {% assign child_list_handle = link.title | handleize %}
22.               {% if linklists[child_list_handle].links != blank %}
23.                 <li class="site-nav--has-dropdown{% if link.active %} site-nav--active{% endif %}" aria-haspopup="true">
24.                   <a href="{{ link.url }}" class="site-nav__link">
25.                     {{ link.title }}
26.                     <span class="icon icon-arrow-down" aria-hidden="true"></span>
27.                   </a>
28.                   <ul class="site-nav__dropdown">
29.                     {% for childlink in linklists[child_list_handle].links %}
30.                       <li{% if childlink.active %} class="site-nav--active"{% endif %}>
31.                         <a href="{{ childlink.url }}" class="site-nav__link">{{ childlink.title | escape }}</a>
32.                       </li>
33.                     {% endfor %}
34.                   </ul>
35.                 </li>
36.               {% else %}
37.                 <li {% if link.active %}class="site-nav--active"{% endif %}>
38.                   <a href="{{ link.url }}" class="site-nav__link">{{ link.title }}</a>
39.                 </li>
40.               {% endif %}
41.             {% endfor %}
42.           </ul>
43.           <!-- //site-nav -->
44.         </div>
45.         <div class="large--hide medium-down--show">
46.           <div class="grid">
47.             <div class="grid__item one-half">
48.               <div class="site-nav--mobile">
49.                 <button type="button" class="icon-fallback-text site-nav__link js-drawer-open-left" aria-controls="NavDrawer" aria-expanded="false">
50.                   <span class="icon icon-hamburger" aria-hidden="true"></span>
51.                   <span class="fallback-text">{{ 'layout.navigation.menu' | t }}</span>
52.                 </button>
53.               </div>
54.             </div>
55.             <div class="grid__item one-half text-right">
56.               <div class="site-nav--mobile">
57.                  <a class="cart" href="/cart">
58.       <a href="/cart" class="js-drawer-open-right site-nav__link" aria-controls="CartDrawer" aria-expanded="false">
59.                  
60.                      {% include 'svg-cart' %}{% if cart.item_count > 0 %}<div style="display:inline-block;position:absolute;font-weight:bold;">{{ cart.item_count }}</div>{% endif %}
61.                   
62.                 </a>
63.        
64.       </a>
65.               </div>
66.             </div>
67.           </div>
68.         </div>
69.       </div>
70.     </nav>

My target in the "nav-bar" element which I make it fixed with Jquery as follows:

2.  </script>
3.               <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
4.               <script>
5.            $(document).scroll(function() {
6.     var y = $(document).scrollTop(), //get page y value 
7.         header = $(".nav-bar"); // your div id
8.     if(y >= 100)  {
9.        $(".nav-placeholder").height($(".nav-bar").outerHeight());
10.         header.css({position: "fixed", "top" : "0", "left" : "0"});
11.     } else {
12.       $(".nav-placeholder").height(0);
13.         header.css("position", "static");
14.     }
15. });

              </script>

I have made a separate div "nav-placeholder" in order to help the "nav-bar" become fixed and the following css for the nav-bar :

2. .nav-bar {
3.   background-color: #116466;
4.   font-family:"Diverplate";
5.   text-transform:uppercase;
6.   font-weight:bold;
7.   z-index:99999;
8.   overflow-x: auto;
9.   height:80px;
10. width:100%;
11.   position:static;
12. }

My problem is in the fact that every time I scroll up and the nav-bar reaches the top of the screen,it just vanishes.I have already set the z-index as I thought initially this might be the issue along with a height for it and also the top of the header that is above it to 0.I have also set the top of the content as the nav-bar was initially covering it's title when I set position:fixed.I have tried almost everything I found on the internet but nothing worked as it won't stay fixed at all on the screen.I don't have any ideas left so I would really appreciate if you can share your thoughts on why this might not be working.Best regards//

1.