过渡不适用于第一个滚动

Question

我有滚动时降低徽标高度的脚本，但我第一次滚动时徽标不起作用。其他一切工作正常。从第二次标志过渡也开始工作。我不知道出了什么问题。请帮助我真的很感激。

$(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/这里是link到fiddle

Answer 1

您需要更改 javascript 函数

演示 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();
    });
});

过渡不适用于第一个滚动

transition not working on 1st scroll

html

javascript

jquery

scroll

css-transitions