jQuery(document).ready(function(){}); not working properly
Question
In main.js
jQuery(document).ready(function(){
"use strict"
$(window).scroll(function(){
var top = $(window).scrollTop();
if(top>=60){
$("nav").addClass('secondary');
}
else{
if($("nav").hasClass('secondary')){
$("nav").removeClass('secondary');
}
}
});
});
In index.html
<head>
<link rel="stylesheet" href="css/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/main.js"></script>
<head>
In style.css
.secondary{
background-color:#34495e;
}
It is a code for changing the class of a navigation bar with class 'nav' to the class 'secondary' when the page scroll to downwards
$(window).scroll(function(){
var top = $(window).scrollTop();
if(top>=60){
$("nav").addClass('secondary');
}
else{
if($("nav").hasClass('secondary')){
$("nav").removeClass('secondary');
}
}
});
The above code doesn't works fine inside
jQuery(document).ready(function(){});
but,
jQuery(document).ready(function(){
"use strict"
alert("hello world");
});
works fine and some other functions also works fine
but some functions not working.
can anyone help me to find the solution for this problem
3 answers
solution1
1 2020-03-19 05:50:29
Your code is correct. Check the value of top with console.log to make sure the scroll event is fired. Otherwise you will find an error about some other part of your code.
For example, this works and is also slightly optimised:
$(document).ready(function() {
"use strict";
var $win = $(window)
var $nav = $("nav");
$win.scroll(function() {
var top = $win.scrollTop();
console.log(top);
if (top >= 60) {
$nav.addClass("secondary");
} else if ($nav.hasClass("secondary")) {
$nav.removeClass("secondary");
}
});
});
solution2
0
You can check what the error is on browser's inspect tool. If you press "F12", "Developer tools" panel will be shown. And click "Console" on this panel and check which error has been occured.
And I guess you need to use "jQuery" keyword to select elements. Or please try following code.
jQuery(document).ready(function($){
"use strict"
$(window).scroll(function(){
var top = $(window).scrollTop();
if(top>=60){
$("nav").addClass('secondary');
}
else{
if($("nav").hasClass('secondary')){
$("nav").removeClass('secondary');
}
}
});
});
If you can share your page url, I can help you to check error and find a solution.
solution3
0 2022-10-06 02:32:18
you can try on this, it works to me
put source script
<script th:src="@{/richtext/jquery.richtext.min.js}"></script>
<script th:src="@{/richtext/jquery.richtext.js}"></script>
then script text:
<script type="text/javascript">
(function($) {
$('#shortDescription').richText();
$('#fullDescription').richText();
})(jQuery);
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.