sos_JS

by GosiaPi

HTML

<style>
  html, body { margin: 0; padding: 0; }
  p { font-family: sans-serif; font-size: 14px; }
  h1,h2,h3,h4,h5,h6 { font-family: serif; font-weight: bold; }
  h1 { font-size: 26px; }
  h2 { font-size: 24px; }
  h3 { font-size: 22px; }
  h4 { font-size: 20px; }
  h5 { font-size: 18px; }
  h6 { font-size: 16px; }
</style>

<div class="title"></div>
<div class="subtitle"></div>
<h2 class="section__title"></h2>
<div class="box"></div>
<div class="container-full"></div>

<!-- NAVIGATION -->
<header class="header" role="banner">
  <div class="header__inner">
    <h1 class="header__title"></h1>
    <div class="header__logo"></div>
    <nav class="nav" role="navigation">
      <ul class="nav__list">
        <li class="nav__item">
          <a href="" class="nav__link"></a>
        </li>
        <li class="nav__item">
          <a href="" class="nav__link"></a>
        </li>
        <li class="nav__item">
          <a href="" class="nav__link"></a>
        </li>
        <li class="nav__item">
          <a href="" class="nav__link"></a>
        </li>
      </ul>
    </nav>
  </div>
</header>


<!-- HEADER BANNER -->
<div class="page-banner__inner">
  <h2 class="page-banner__title"></h2>
  <a href="" class="btn btn-ghost"></a>
</div>

<!-- SECTION -->
<section>
  <div class="wrapper wrapper--wide wrapper--full"></div>
</section>

<!-- ARTICLE -->
<article class="article">
  <h2 class="article__header"></h2>
  <div class="article__description"></div>
</article>

<!-- CAROUSEL -->
<div class="carusel">
  <ul class="carusel__panes">
    <li class="carusel__pane"></li>
    <li class="carusel__pane"></li>
    <li class="carusel__pane"></li>
    <li class="carusel__pane"></li>
  </ul>
</div>

<!-- LAYOUT -->
<div class="layout layout--middle">
  <div class="layout__item"></div>
  <div class="layout__item"></div>
  <div class="layout__item"></div>
</div>
<div class="layout">
    <div class="layout__left">left here</div>
    <div class="layout__right">right...

JavaScript

//----------------show menu when scroll up--------------------------------------

//css .nav-up {
    background: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    pointer-events: auto;
}

var lastScroll = 0;
var scrollingTop = false;
function isScrollingTop() {
    $(window).scroll(function() {
        var st = $('body').scrollTop();
        if ( st < lastScroll ) {
            scrollingTop  = true;
        } else {
            scrollingTop  = false;
        }

        lastScroll = st;
    });
}

// mobile - nav shirnk
  if (screen.width <= 1024) {

    var prev = 0;
    var $window = $(window);
    var nav = $('#header');

    $window.on('scroll', function() {
      var scrollTop = $window.scrollTop();
      nav.toggleClass('header-shrink', scrollTop > prev);
      prev = scrollTop;
    });

  }
//----------------Scroll header------------------------------------------------
        function scroll_header() {
            $(window).scroll(function () {
                const scroll = $(window).scrollTop();
                if ($('body').width() >= '1024' && scroll >= 100 && !scrollingTop ) {
                    $('.header').addClass('is-scrolled');
                } else {
                    $(".header").addClass('nav-up');
                    $('.header').removeClass('is-scrolled');
                }
            });
        }
-------------------------------// mobile sublist - open and close automaticlly
                    $('.nav__link').on('click', function () {
                        var $thisParent = $(this).parent();

                        if ($thisParent.hasClass('is-open')) {
                            $thisParent.removeClass('is-open');
                        } else {
                            $('li.nav__item').removeClass('is-open');
                            $thisParent.addClass('is-open');
                        }
                        resetNavPosition($thisParent);
                    });
                   ...