Добавляйте и удаляйте класс при прокрутке на определенное расстояние, но с разными размерами @media - PullRequest
1 голос
/ 14 октября 2019

Я немного застрял в коде.

Мне нужна помощь с вложением нескольких операторов if и else.

Я пытаюсь сделать фрагмент кода, который добавляет иудаляет класс при прокрутке. Но я хотел бы выбрать три размера @media.

Я тестировал следующие два фрагмента кода, и они работают:

Фрагмент кода # 1

    $(window).scroll(function() {
      if ($(this).scrollTop() > 50 && $(window).width() <= 1100) {
              console.log($(this).scrollTop() + ' ' + $(window).width());

    $('.services-breadcrumb').addClass('services-breadcrumb-scroll-nav');
  }
  else{
    $('.services-breadcrumb').removeClass('services-breadcrumb-scroll-nav');
  }
});

Фрагмент кода # 2

$(window).scroll(function(){
  var scroll = $(window).scrollTop();
  if(scroll > 50 ){

    $('.services-breadcrumb').addClass('services-breadcrumb-scroll-nav');
  }
  else{
    $('.services-breadcrumb').removeClass('services-breadcrumb-scroll-nav');
  }
});

Я хотел бы создать вложенные операторы if и else для трех различных размеров @media (1100> | <1100 |<767). </p>

Это то, над чем я играл со следующим фрагментом кода, но у меня ничего не получилось.

Фрагмент кода теста # 1

$(window).scroll(function() {
    if ($(window).width() >= 1100) {      
        if ($(document).scrollTop() > 50) {
               $('.services-breadcrumb').addClass('services-breadcrumb-scroll-nav');
                  }
         else {
               $('.services-breadcrumb').removeClass('services-breadcrumb-scroll-nav');
         }

    } else if($(window).width() <= 1100) {
        if ($(document).scrollTop() > 75) {
               $('.services-breadcrumb').addClass('services-breadcrumb-scroll-nav');
                  }
         else {
               $('.services-breadcrumb').removeClass('services-breadcrumb-scroll-nav');
         }
     } else if($(window).width() <= 767) {
        if ($(document).scrollTop() > 100) {
               $('.services-breadcrumb').addClass('services-breadcrumb-scroll-nav');
                  }
         else {
               $('.services-breadcrumb').removeClass('services-breadcrumb-scroll-nav');
         }
     }
 }); 

Мне действительно нужна помощь, пожалуйста. Заранее спасибо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...