Header Transition bug in Mobile Version

programming
1

takht.in … In mobile version when scroll down some bug are there … Can you please check it out … Please help …
Problem in header transition.

2

The reason is you are animating the header to the top, but when the page is scrolled, the value of top keeps changing. It’s like running after a finish line that keeps moving further and further away :slight_smile:

The solution is to set position: fixed on your header just as you are about to animate it to the top. Once you’ve done that, that will ensure your page scrolls don’t affect how far your animation has to scroll.

Cheers,
Kirupa :slight_smile:

3

Actually I want to do like so … when I scroll down logo will be smaller and after few px down it will be hide … and the menu will be fixed at the top most … and it is working fine … but when the menu is hiding the background letter will shown … that is the bug … https://ibb.co/kyidKk

So I want to do like when the logo will be hiding exactly on same time the menu bar will be fixed on the extreme top.

This is HTML CODE

    <!-- logo area -->
<div class="logo-container fixed-top logo-bg-color">
  <div class="container">
    <h1 class="text-center">
      <a href="http://takht.in/" class="logo-color">takht</a>
    </h1>
  </div>
</div>
<!-- end logo area -->

<!-- header navigation -->
<nav class="navbar body-bg-color fixed-top navbar-toggleable-md" style="min-height:50px;top:96px;">
  <div class="container header-nav-container">
    <div class="navbar-toggler-left logo-on-nav"><a href="http://takht.in/">takht</a></div>
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      MENU <i class="fa fa-bars" aria-hidden="true"></i>
    </button>
    <div class="collapse navbar-collapse justify-content-center" id="navbarNavDropdown">
    <ul class="navbar-nav hearder-nav-item">
      <li class="nav-item active">
        <a class="nav-link" href="http://takht.in/">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link about" href="#about">About</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Portfolio
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item performances" href="#performances">Performances</a>
          <a class="dropdown-item gallery" href="#gallery">Gallery</a>
          <a class="dropdown-item" href="http://takht.in/portfolio/videos">Videos</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link team" href="#team">Team</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="http://takht.in/events">Events</a>
      </li>
      <li class="nav-item">
        <a class="nav-link contact" href="#">Contact</a>
      </li>
    </ul>
    </div>
  </div>
</nav>
<!-- end header navigation -->

This is JS

window.addEventListener('scroll', customScroll);
window.addEventListener('scroll', customScrollMob);

function customScrollMob() {
  var w = $( window ).width();
  var ypos = window.pageYOffset;

  if(w < 982) {
    if(ypos > 90) {
      $('.navbar').css({
        'top': '0px'
      });
      $('.logo-on-nav').fadeIn( "slow" );
      $('.logo-container').fadeOut();
      $('.navbar-toggler').css({
        'margin-top': '-33px'
      });
    } else {
      $('.logo-container').fadeIn( "slow" );
      $('.logo-on-nav').fadeOut();
      $('.navbar-toggler').css({
        'margin-top': '0px'
      });
    }
  }
}

function customScroll() {
  var ypos = window.pageYOffset;

  if(ypos > 90) {
    $('.logo-container .container h1').css({
      'padding-top': '10px',
      'padding-bottom': '0px'
    });
    $('.logo-container .container h1 a').css({
      'font-size': '30px'
    });
    $('.navbar').css({
      'top': '60px'
    });
  } else {
    $('.logo-container .container h1').css({
      'padding-top': '20px',
      'padding-bottom': '10px'
    });
    $('.logo-container .container h1 a').css({
      'font-size': '60px'
    });
    $('.navbar').css({
      'top': '96px'
    });
  }
}

this is the css

.logo-    container .container h1 {padding-top:20px;padding-bottom:10px;transition: all 0.5s;}
    .logo-container .container h1 a{font-family:'Samarkan';font-size:60px;text-decoration:none;transition: all 0.5s;}
4

Sorry. I am not able to understand the problem. Right now, the logo animates away as the menu slides up. Is your goal to have the logo animate quickly (or even immediately) so that it isn’t noticeable when the menu slides up?

Thanks,
Kirupa