过渡不适用于第一滚动

Question

I have script for reduce height of logo when scrolling but I scroll for the first time transition for the logo not working. Everything else work fine. From the second time logo transition also start to work. I dont know what is the wrong. Please help I really appreciate it.

$(window).scroll(function() {

    ypos = window.pageYOffset;

    var logo = document.getElementById('logo');
    var nav = document.getElementById('main_nav');
    var sm = document.getElementById('sm');
    var mm = document.getElementById('mm');
    var but = document.getElementById('tp-button');
    var but2 = document.getElementById('tp-button2');

    if (ypos > 1) {
        logo.style.height = '70px'
        nav.style.height = '70px'
        sm.style.marginTop = '13px'
        mm.style.marginTop = '5px'
    } else {
        logo.style.height = '107px'
        nav.style.height = '107px'
        sm.style.marginTop = '30px'
        mm.style.marginTop = '20px'
    }
});

http://jsfiddle.net/ty2fjhhr/ here is the link to fiddle

Answer 1

You need to change your javascript function

Demo Link : http://jsfiddle.net/ty2fjhhr/3/

$(document).ready(function(){

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

    var logo = document.getElementById('logo');
    var nav = document.getElementById('main_nav');
    var sm = document.getElementById('sm');
    var mm = document.getElementById('mm');
    var but = document.getElementById('tp-button');
    var but2 = document.getElementById('tp-button2');

       if (ypos > 1) {
           logo.style.height = '70px'
           nav.style.height = '70px'
           sm.style.marginTop = '13px'
           mm.style.marginTop = '5px'
        } else {
           logo.style.height = '107px'
           nav.style.height = '107px'
           sm.style.marginTop = '30px'
           mm.style.marginTop = '20px'
        }
    }

    myCustomFunction();

    $(window).scroll(function() {
       myCustomFunction();
    });
});