Question

试图让我的代码更清晰我不想多次编写相同的代码，但不知道如何完成它。您可以在下面的代码中看到if/else写了两次，但也做了同样的事情。我怎样才能return数据并再次调用该函数只写一次？

非常感谢帮助和建议。

代码是这样的：

(function($){
    var scroll = $(this).scrollTop();
    var header = $('header');
    var headerSmall = header.children('.small');
    var headerBigWrap = header.children('.big');
    var headerBigWrapHeight = headerBigWrap.height();

    var showNav = function() {
        header.css('position','fixed');
        headerBigWrap.css('display','none');
        headerSmall.css('display','block');
    }

    var hideNav = function() {
        header.css('position','static');
        headerSmall.css('display','none');
        headerBigWrap.css('display','block');
    }

    // don't want to write this more than once 
    // but need to call here on document ready
    if( scroll >= headerBigWrapHeight ) {
        showNav();
    } else {
        hideNav();
    }


    $(window).scroll(function(event){

        scroll = $(this).scrollTop();

        // here I need it again
        // scroll is changing on scroll
        // but "function" does exactly the same like above

        if( scroll >= headerBigWrapHeight ) {
            showNav();
        } else {
            hideNav();
        }
    });

})(jQuery);

如果您需要html和css工作示例：fiddle http://jsfiddle.net/cejs3jhs/和其他代码：

<header>
    <div class="big">
        <h1>Page Title</h1>
    </div>
    <div class="small">
        <span class="icon nav-icon">Nav Icon</span>
    </div>
</header>
<div class="page"></div>

<style type="text/css">
header {
    width:100%;
    background-color:red;
    opacity:0.5;
}
header.toggle-nav {
    height:100%;
}
header.toggle-nav ul {
    display:block;
}
header > div {
    position:relative;
    width:976px;
    margin:0 auto;
}
header > div.big {
    padding:30px 0;
}
.page {
    height:5000px;
    background-color:orange;
    opacity:0.5;
}
</style>

Answer 1

所以只需为此制作单独的功能：

function showHideNav(scroll, headerBigWrapHeight, element) {
    var scroll = element.scrollTop(),
    header = $('header'),
    headerSmall = header.children('.small'),
    headerBigWrap = header.children('.big')
    headerBigWrapHeight = headerBigWrap.height();

    if( scroll >= headerBigWrapHeight ) {
        header.css('position','fixed');
    } else {
        header.css('position','static');
    }

    headerBigWrap.toggle();
    headerSmall.toggle();
}

(function($){
    showHideNav(scroll);

    $(window).scroll(function(event){
        scroll = $(this).scrollTop();
        showHideNav(scroll);
    });

})(jQuery);

Answer 2

您可以像使用showNav＆amp; amp; hideNav功能

(function($){
    var scroll = $(this).scrollTop();
    var header = $('header');
    var headerSmall = header.children('.small');
    var headerBigWrap = header.children('.big');
    var headerBigWrapHeight = headerBigWrap.height();

    var showNav = function() {
        header.css('position','fixed');
        headerBigWrap.css('display','none');
        headerSmall.css('display','block');
    }

    var hideNav = function() {
        header.css('position','static');
        headerSmall.css('display','none');
        headerBigWrap.css('display','block');
    }

     var checkScroll = function (scroll,headerBigWrapHeight){
    if( scroll >= headerBigWrapHeight ) {
        showNav();
    } else {
        hideNav();
    }

    checkScroll(scroll,headerBigWrapHeight);


    $(window).scroll(function(event){
        scroll = $(this).scrollTop();
         checkScroll(scroll,headerBigWrapHeight);
    });



})(jQuery);

Answer 3

你的问题的答案正是贾斯蒂纳斯所说的，再做一个功能。但是你可以通过更积极的编辑来改进，这就是我所做的。

(function ($) {
    var header = $('header');
    var headerSmall = header.children('.small');
    var headerBigWrap = header.children('.big');
    var headerBigWrapHeight = headerBigWrap.height();

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

        if( scroll >= headerBigWrapHeight ) {
            header.css('position', 'fixed');
            headerSmall.css('display', 'block');
            headerBigWrap.css('display', 'none');
        } else {
            header.css('position', 'static');
            headerSmall.css('display', 'none');
            headerBigWrap.css('display', 'block');
        }
    }
    $(window).scroll(setNavStyle);
    setNavStyle();
})(jQuery);

这是一种方式，但是做大部分工作会更好（更易于维护，更简单，更快）使用CSS的工作，如下：

CSS：

header {
    position: static;
}
header>.small {
    display: none;
}
header>.big {
    display: block;
}

.stickyNav header {
    position: fixed;
}
.stickyNav header>.small {
    display: block;
}
.stickyNav header>.big {
    display: none;
}

JavaScript的：

(function ($) {
    var bigNavHeight = $('header>.big').height();
    function setNavStyle() {
        var bigIsOffscreen = $(this).scrollTop() >= bigNavHeight;

        $(document.body).toggleClass('stickyNav', bigIsOffscreen);
    }

    $(window).scroll(setNavStyle);
    setNavStyle();
})(jQuery);

Answer 4

请在下面找到更新的JS代码：

(function($){
    var scroll = $(this).scrollTop();
    var header = $('header');
    var headerSmall = header.children('.small');
    var headerBigWrap = header.children('.big');
    var headerBigWrapHeight = headerBigWrap.height();

    var showNav = function() {
        header.css('position','fixed');
        headerBigWrap.css('display','none');
        headerSmall.css('display','block');
    }

    var hideNav = function() {
        header.css('position','static');
        headerSmall.css('display','none');
        headerBigWrap.css('display','block');
    }

    var callFun = function(scroll) {
        if( scroll >= headerBigWrapHeight ) {
            showNav();
        } else {
            hideNav();
        }
    }


    callFun(scroll);


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

        callFun(scroll);
    });

})(jQuery);

Answer 5

完全像您使用函数showNav和hideNav那样做：在某处定义一个带if/else的函数，您可以在需要时通过名称调用它。还有一些变量可以省略，所以我在这里显示所有代码：

(function($){
    // var scroll is moved into function scrollFunc
    var header = $('header');
    var headerSmall = header.children('.small');
    var headerBigWrap = header.children('.big');
    // var headerBigWrap is moved into function scrollFunc

    var showNav = function() {
        /* your code */
    }

    var hideNav = function() {
        /* your code */
    }

    var scrollFunc = function () {
        if($(this).scroll() >= headerBigWrap.height() ) {
            showNav();
        } else {
            hideNav();
        }
    }

    $(window).scroll(function(event){
        scrollFunc();
    });

    scrollFunc(); // call it first time to initialize

});

在任何地方使用函数而不必多次写入

5 个答案: