Панель приложений для материального дизайна с помощью CSS

ProgramBox

Панель приложений для материального дизайна с помощью CSS

Post author:admin
Запись опубликована:23 августа, 2022
Post category:Вопросы по программированию

#javascript #html #css #scroll #menu

#javascript #HTML #css #прокрутка #меню

Вопрос:

Мне нужно оформить панель навигации как панель приложений в приложениях material design с помощью CSS. Например, приложение Google-Keep или приложение Playstore. На этой панели навигации находятся заголовок и простое меню.

У меня есть раздел содержимого и два фиксированных раздела вверху. Один из них всегда фиксирован, а другой имеет отрицательное поле -вверху при прокрутке. Но, если я прокручиваю вниз, появляется короткий эффект «мигания», и я не знаю почему.

 $(document).ready( function() {
		
    var lastScrollY = 0;
    var lastScrollDownY = 0;
    var lastScrollUpY = 0;
    
    $(window).scroll(function() {
    		var scrollY = $(this).scrollTop();
        
        // detect scroll down / up
        if(scrollY < lastScrollY)
        {
        	var diffScroll = lastScrollDownY - scrollY;
            if(diffScroll > 105)
            {
                diffScroll = 105;
            }
            var navbarY = -105 diffScroll;
            $("#navbar-bottom").css({
                "margin-top":navbarY "px"
            });
            lastScrollUpY = scrollY;
        } else {
        		var diffScroll2 = lastScrollDownY - lastScrollUpY;
            if(diffScroll2 > 105)
            {
                diffScroll2 = 105;
            }
            $("#navbar-bottom").css({
                "margin-top":"-" diffScroll2 "px"
            });
            lastScrollDownY = scrollY;
        }
        
        lastScrollY = scrollY;
    });
    
});

 body {
  height:100%;
}
#header {
  width:100%;
}
#navbar-top {
  width:100%;
  position:fixed;
  top:0;
  z-index:1000;
  height:35px;
  background-color:#1976D2;
}
#navbar-bottom {
  width: 100%;
	position:fixed;
	top:0;
	z-index: 999;
  height:105px;
  background-color: #2196F3;
}
#navbar-bottom .navbar {
  padding-top: 35px;
}
#wrapper {
  padding-top: 105px;
  position: relative;
  height:2000px;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div id="header">
        <div id="navbar-top">
            ActionBar (always fixed)
        </div>
        <div id="navbar-bottom">
            <div class="navbar">
                Menu links here
            </div>
        </div>
    </div>
    <div id="wrapper">
        <div id="content">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem 
        </div>
    </div>
</body>

Развернуть фрагмент

Спасибо за любую помощь!

1. Кажется, что мигание возникает, как будто вы слегка прокручиваете, вы начинаете с поля, превышающего -65 пикселей. Если вы хотите, чтобы нижняя панель навигации прокручивалась с содержимым, почему бы просто не поместить ее в оболочку?

2. -65 пикселей в каком разделе? Как значение css по умолчанию или значение прокрутки вниз? Потому что нижняя панель навигации должна прокручиваться только с помощью прокрутки вниз. При прокрутке вверх панель навигации должна «прокручиваться» в фактическом положении прокрутки.

3. Я думаю, что именно этот бит вызывает это : var navbarY = -105 diffScroll; . если вы выполните a console.log для этой переменной, вы увидите, что она начинается как отрицательная

4. Спасибо! Я заменил его просто преобразованием. Смотрите ответ от K. Даниек.

Ответ №1:

Вот так. Добавлено transform: translateY() , что намного более динамично, чем просто изменение margin-top свойства. Проверьте это и скажите мне, удовлетворяет ли вас это, если нет — дайте мне знать, и я постараюсь улучшить его.

https://jsfiddle.net/pfj9j8md/

Показать фрагмент кода

 var lastScrollY = 0;
	var lastScrollDownY = 0;
	var lastScrollUpY = 0;

	$(window).scroll(function() {
	  var scrollY = $(this).scrollTop();

	  // detect scroll down / up
	  if (scrollY < lastScrollY) {
	    var diffScroll = lastScrollDownY - scrollY;
	    if (diffScroll > 105) {
	      diffScroll = 105;
	    }
	    var navbarY = -105   diffScroll;
	    $("#navbar-bottom").css({
	      'transform': 'translateY(0)'
	    });
	    lastScrollUpY = scrollY;
	  } else {
	    var diffScroll2 = lastScrollDownY - lastScrollUpY;
	    if (diffScroll2 > 105) {
	      diffScroll2 = 105;
	    }
	    $("#navbar-bottom").css({
	      'transform': 'translateY(-200px)'
	    });
	    lastScrollDownY = scrollY;
	  }

	  lastScrollY = scrollY;
	});

 body {
  height: 100%;
}
#header {
  width: 100%;
}
#navbar-top {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 1000;
  height: 35px;
  background-color: #1976D2;
}
#navbar-bottom {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 999;
  height: 105px;
  background-color: #2196F3;
  transition: all .5s ease;
}
#navbar-bottom .navbar {
  padding-top: 35px;
}
#wrapper {
  padding-top: 105px;
  position: relative;
  height: 2000px;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="header">
    <div id="navbar-top">
      ActionBar (always fixed)
    </div>
    <div id="navbar-bottom">
      <div class="navbar">
        Menu links here
      </div>
    </div>
  </div>
  <div id="wrapper">
    <div id="content">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
      sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
      Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem
    </div>
  </div>
</body>

Ответ №2:

Добавьте плавную анимацию для подменю:

 #navbar-bottom {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 999;
    height: 105px;
    background-color: #2196F3;
    transition: all 500ms;
}

Показать фрагмент кода

 $(document).ready(function() {

  var lastScrollY = 0;
  var lastScrollDownY = 0;
  var lastScrollUpY = 0;

  $(window).scroll(function() {
    var scrollY = $(this).scrollTop();

    // detect scroll down / up
    if (scrollY < lastScrollY) {
      var diffScroll = lastScrollDownY - scrollY;
      if (diffScroll > 105) {
        diffScroll = 105;
      }
      var navbarY = -105   diffScroll;
      $("#navbar-bottom").css({
        "margin-top": navbarY   "px"
      });
      lastScrollUpY = scrollY;
    } else {
      var diffScroll2 = lastScrollDownY - lastScrollUpY;
      if (diffScroll2 > 105) {
        diffScroll2 = 105;
      }
      $("#navbar-bottom").css({
        "margin-top": "-"   diffScroll2   "px"
      });
      lastScrollDownY = scrollY;
    }

    lastScrollY = scrollY;
  });

});

 body {
  height: 100%;
}
#header {
  width: 100%;
}
#navbar-top {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 1000;
  height: 35px;
  background-color: #1976D2;
}
#navbar-bottom {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 999;
  height: 105px;
  background-color: #2196F3;
  transition: all 500ms;
}
#navbar-bottom .navbar {
  padding-top: 35px;
}
#wrapper {
  padding-top: 105px;
  position: relative;
  height: 2000px;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="header">
    <div id="navbar-top">
      ActionBar (always fixed)
    </div>
    <div id="navbar-bottom">
      <div class="navbar">
        Menu links here
      </div>
    </div>
  </div>
  <div id="wrapper">
    <div id="content">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
      sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
      Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem
    </div>
  </div>
</body>

Метки: Панель приложений для материального дизайна с помощью CSS