CODEWITHSUNDEEP
javascriptjquerycssresponsive
scott
scott

Reputation: 21

inactive jquery on responsive

i have this script in my js,I made a navigation change color when scrolling, navigation turns into a white color. and I try responsive when I want to inactivate script

$(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",
                    });
               }

           });
            }
        });

i want inactive this script when min width 768 max width 991, how would I do that?

Upvotes: 2

Views: 143

Answers (4)

epascarello
epascarello

Reputation: 207501

I would do it with media queries and not check the width with JavaScript.

$(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 want to do it with JavaScript. I would use window resize to detect the size of the browser instead of checking it on every scroll iteration.

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 */
});

Upvotes: 0

Ted
Ted

Reputation: 570

Wrap it inside an if, like so:

$(document).ready(function(){  

    // ... more code here

    $(document).scroll(function() { 

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

        // .... rest of your normal code here
    })
})

Upvotes: 2

Riccardo
Riccardo

Reputation: 178

A solution could be window.innerWidth

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


            // BLOCK IF IN REQUESTED 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",
                    });
               }

           });
            }
        });

Upvotes: 0

Sumesh S
Sumesh S

Reputation: 758

function myFunction() {
  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",
        }
        );
      }
    }
    );
  }
}

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

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

Upvotes: 0

Related Questions