jQuery is not active on responsive designs

Question

jQuery is not active on responsive designs

I have implemented a script in my JavaScript code that changes the color of the navigation bar when scrolling. The navigation bar transitions to a white color as you scroll down. However, I am facing an issue with responsiveness and would like to deactivate this script for screen sizes between 768px and 991px.

$(document).ready(function(){       
var scroll_start = 0;
var startchange = $('.change-col-nav');
var offset = startchange.offset();
    if (startchange.length){
        $(document).scroll(function() { 
        scroll_start = $(this).scrollTop();
        if(scroll_start > offset.top)   {
            $(".navbar-inverse").css({
                        "background-color": "#fff", 
                        "border-bottom": "1px solid #febe10",
                        "transition": "all 0.4s cubic-bezier(0.000, 0.000, 0.580, 1.000)"
                    });
                }
               else
               {
                  $('.navbar-inverse').css({
                      'background-color': 'transparent',
                      "border-bottom": "0",
                    });
               }
           });
            }
        });

Could someone guide me on how to disable this script specifically for screen sizes between 768px and 991px?

javascript jquery css responsive

Answer 1

Answer №1

To properly contain it within an if statement, do the following:

$(document).ready(function(){  

    // ... additional code goes here

    $(document).scroll(function() { 

        if ($(window).width() > 768 && $(window).width() < 991) {
            return;
        }

        // .... continue with the remaining code
    })
})

Answer 2

To properly contain it within an if statement, do the following:

$(document).ready(function(){  

    // ... additional code goes here

    $(document).scroll(function() { 

        if ($(window).width() > 768 && $(window).width() < 991) {
            return;
        }

        // .... continue with the remaining code
    })
})

Answer 3

Answer №2

function adjustNavbarStyle() {
  var scroll_start = 0;
  var start_change = $('.change-col-nav');
  var offset = start_change.offset();
  
  if (start_change.length) {
    $(document).scroll(function() {
      scroll_start = $(this).scrollTop();
      
      if(scroll_start > offset.top) {
        $(".navbar-inverse").css({
          "background-color": "#fff",
          "border-bottom": "1px solid #febe10",
          "transition": "all 0.4s cubic-bezier(0.000, 0.000, 0.580, 1.000)"
        });
      }
      else {
        $('.navbar-inverse').css({
          'background-color': 'transparent',
          "border-bottom": "0"
        });
      }
    });
  }
}

$(document).ready(function() {
  var window_width = $(window).width();
  
  if(window_width < 768 || window_width > 991) {
    adjustNavbarStyle();
  }
});

$(window).resize(function() {
  var window_width = $(window).width();
  
  if(window_width < 768 || window_width > 991) {
    adjustNavbarStyle();
  }
});

Answer 4

function adjustNavbarStyle() {
  var scroll_start = 0;
  var start_change = $('.change-col-nav');
  var offset = start_change.offset();
  
  if (start_change.length) {
    $(document).scroll(function() {
      scroll_start = $(this).scrollTop();
      
      if(scroll_start > offset.top) {
        $(".navbar-inverse").css({
          "background-color": "#fff",
          "border-bottom": "1px solid #febe10",
          "transition": "all 0.4s cubic-bezier(0.000, 0.000, 0.580, 1.000)"
        });
      }
      else {
        $('.navbar-inverse').css({
          'background-color': 'transparent',
          "border-bottom": "0"
        });
      }
    });
  }
}

$(document).ready(function() {
  var window_width = $(window).width();
  
  if(window_width < 768 || window_width > 991) {
    adjustNavbarStyle();
  }
});

$(window).resize(function() {
  var window_width = $(window).width();
  
  if(window_width < 768 || window_width > 991) {
    adjustNavbarStyle();
  }
});

Answer 5

Answer №3

An effective solution is to utilize window.innerWidth

$(document).ready(function(){       
var scroll_start = 0;
var startchange = $('.change-col-nav');
var offset = startchange.offset();
    if (startchange.length){
        $(document).scroll(function() { 


            // CHECK IF WITHIN SPECIFIED WIDTH
            if(window.innerWidth >= 768 && window.innerWidth <= 991) {
                return;
            }


        scroll_start = $(this).scrollTop();
        if(scroll_start > offset.top)   {
            $(".navbar-inverse").css({
                        "background-color": "#fff", 
                        "border-bottom": "1px solid #febe10",
                        "transition": "all 0.4s cubic-bezier(0.000, 0.000, 0.580, 1.000)"


                    });
                }

               else

               {
                  $('.navbar-inverse').css({
                      'background-color': 'transparent',
                      "border-bottom": "0",
                    });
               }

           });
            }
        });

Answer 6

An effective solution is to utilize window.innerWidth

$(document).ready(function(){       
var scroll_start = 0;
var startchange = $('.change-col-nav');
var offset = startchange.offset();
    if (startchange.length){
        $(document).scroll(function() { 


            // CHECK IF WITHIN SPECIFIED WIDTH
            if(window.innerWidth >= 768 && window.innerWidth <= 991) {
                return;
            }


        scroll_start = $(this).scrollTop();
        if(scroll_start > offset.top)   {
            $(".navbar-inverse").css({
                        "background-color": "#fff", 
                        "border-bottom": "1px solid #febe10",
                        "transition": "all 0.4s cubic-bezier(0.000, 0.000, 0.580, 1.000)"


                    });
                }

               else

               {
                  $('.navbar-inverse').css({
                      'background-color': 'transparent',
                      "border-bottom": "0",
                    });
               }

           });
            }
        });

Answer 7

Answer №4

I prefer using media queries over JavaScript to handle responsive design.

$(window).on("scroll", function () {
    var offset=100;
    $(document.body).toggleClass("scrolled-active", $(window).scrollTop() > offset);
    
});

body {
  padding-top: 50px;
}
.scrolled {
  
}
p {
  margin-bottom: 50px;  
}
#foo {
  position: fixed;
  top: 0;
  left:0;
  background-color: #CCC; 
  width: 100%;
}

media (min-width:768px) and (max-width:992px) {
  .scrolled-active #foo {
    background-color: #FCC;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="foo">Test</div>
<p>I like cheese</p>
<p>I like cheese</p>
<p>I like cheese</p>
<p>I like cheese</p>
<p>I like cheese</p>
<p>I like cheese</p>
<p>I like cheese</p>
<p>I like cheese</p>
<p>I like cheese</p>
<p>I like cheese</p>

If you decide to use JavaScript, I recommend utilizing window resize event to determine browser size instead of checking on every scroll event.

var isWidthValid;
$(window).on("resize load", function() {
    var width = $(window).width();
    isValidWidth = width>=768 && width<=991;
    $(window).trigger("scroll");
}).on("scroll", function(){
    if(!isValidWidth) return;
    /* Your code */
});

Answer 8

I prefer using media queries over JavaScript to handle responsive design.

$(window).on("scroll", function () {
    var offset=100;
    $(document.body).toggleClass("scrolled-active", $(window).scrollTop() > offset);
    
});

body {
  padding-top: 50px;
}
.scrolled {
  
}
p {
  margin-bottom: 50px;  
}
#foo {
  position: fixed;
  top: 0;
  left:0;
  background-color: #CCC; 
  width: 100%;
}

media (min-width:768px) and (max-width:992px) {
  .scrolled-active #foo {
    background-color: #FCC;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="foo">Test</div>
<p>I like cheese</p>
<p>I like cheese</p>
<p>I like cheese</p>
<p>I like cheese</p>
<p>I like cheese</p>
<p>I like cheese</p>
<p>I like cheese</p>
<p>I like cheese</p>
<p>I like cheese</p>
<p>I like cheese</p>

If you decide to use JavaScript, I recommend utilizing window resize event to determine browser size instead of checking on every scroll event.

var isWidthValid;
$(window).on("resize load", function() {
    var width = $(window).width();
    isValidWidth = width>=768 && width<=991;
    $(window).trigger("scroll");
}).on("scroll", function(){
    if(!isValidWidth) return;
    /* Your code */
});

jQuery is not active on responsive designs

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The `XMLHttpRequest.prototype.open` function does not capture every single HTTP request visible in the chrome-dev-tools

Getting data from an API using a Bearer Token with React Hooks

Utilizing CSS transitions to smoothly adjust the width of an element until it completely fills the container div in ReactJS

Unable to generate a menu with bootstrap

Tips for preventing an element from scrolling horizontally along with the page body

Guide to incorporating Jquery-Comment into Angular versions 2 and beyond

When viewing HTML "Div" on smaller screens, the full height may not be displayed properly

An error occurred while attempting to save a new entry using the New Entry Form in DataTable, stating that the variable "

What is the best way to search for a specific item in Express.js?

Encountering difficulty when trying to initiate a new project using the Nest CLI

What could be causing a template value in my AngularJS/Ionic Framework code to not be replaced properly?

Exploring the Transition from React.js with Material UI to Next.js for Server-Side Rendering: A Comparison of Tailwind CSS, Material UI, and Chakra UI

Expanding Gridview Width within a Container in ASP.Net: A Step-by-Step Guide

error in three.js occurs when attempting to load .obj files

convert text on website using selected option from menu

Pass an array from JavaScript to PHP

What is the best way to achieve a consistent style for two tables?

Implementing jQuery to add content within Redactor

Using AJAX within the $.when function to extract the first character from the returned string

In which location can one find the compiled TypeScript files within an Angular 2 project?