javascript - How do i define $ in my Js Query -
i trying run jquery perform fixed scroll page can scroll fix portion of page @ top. below jquery, css , html used. please can tell me doing wrong??
jquery error message: uncaught referenceerror: $ not defined
html:
house of ribs: la mango
<div> <nav id="main-nav"> <ul> <li> <i class="icon ion-search placeholder-icon"></i> find hangout spot </li> </ul> </nav> </div> <span id="mine"></span>
css:
ul{ margin: 0; color: white; padding: 5px 20px 5px 20px; list-style-type: none; background: #ef5350; } ul li{ display: inline-block; padding: 6px; vertical-align: top; } .fixed-nav{ width: 100%; position: fixed; top: 0px; left: 0; }
jquery:
var offset = $('#main-nav').offset(); $(window).scroll(function(){ //$('#mine').text($(document).scrolltop()); $('#main-nav').addclass('fixed-nav'); if($(document).scrolltop() < 10){ $('#main-nav').removeclass('fixed-nav'); } });
first check if jquery has been included, , if you're using prototype (magento uses it) or other library uses $
wrap jquery code withing iife can use $
safely within.
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
javascript
(function($){ //$ jquery var offset = $('#main-nav').offset(); $(window).scroll(function(){ //$('#mine').text($(document).scrolltop()); $('#main-nav').addclass('fixed-nav'); if($(document).scrolltop() < 10){ $('#main-nav').removeclass('fixed-nav'); } }); })(jquery);
Comments
Post a Comment