scott scott - 3 months ago 21
CSS Question

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?

Answer
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();
  }
});