Javascript 在任何地方使用函数，但不要多次编写

试图让我的代码更干净，我不想写同样的代码很多次，但不知道如何完成它。您可以在下面的代码中看到，

if/else

写了两次，但都做了相同的操作。我怎样才能

返回

数据并在只写一次的情况下再次调用该函数

非常感谢您的帮助和建议

代码如下：

(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和其他代码：

<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>

页面标题
导航图标
标题{
宽度：100%；
背景色：红色；
不透明度：0.5；
}
header.toggle-nav{
身高：100%；
}
标题.切换-nav ul{
显示：块；
}
标题>div{
位置：相对位置；
宽度：976px；
保证金：0自动；
}
标题>div.big{
填充：30px0；
}
.第页{
高度：5000px；
背景颜色：橙色；
不透明度：0.5；
}

所以只需为其创建单独的函数：

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);

---

因此，只需为其创建单独的函数：

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);

---

请查找以下更新的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);

---

请查找以下更新的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);

---

完全像处理函数那样执行

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

});

---

完全像处理函数那样执行

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

});

---

您可以像使用showNav和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);

---

您可以像使用showNav和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);

---

你的问题的答案很简单，贾斯汀斯说，做另一个函数。但是你可以通过一些更积极的编辑来提高一点，这就是我所做的

(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:

JavaScript:

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

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

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

---

你的问题的答案很简单，贾斯汀斯说，做另一个函数。但是你可以通过一些更积极的编辑来提高一点，这就是我所做的

(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:

JavaScript:

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

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

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

---

谢谢，但它也可以在不更改我的变量的情况下工作，正如一位用户解释的那样，但删除了他的答案。谢谢，但它也可以在不更改我的变量的情况下工作，正如一位用户解释的那样，但删除了他的答案。谢谢，但与另一位用户解释的一样（不幸地删除了他的答案）我们甚至不必将参数

scroll

传递给函数。谢谢，但就像另一位用户解释的那样（不幸地删除了他的答案），我们甚至不必将参数

scroll

传递给函数。哇，这就是我要找的，你答案的第二部分！如何在文档就绪时调用

setNavStyle（）

？因为如果我像往常一样调用它，我会得到

setNavStyle没有定义

我发布的代码已经在声明时调用了它。如果您不想在这个时候调用它，那么您应该正确地声明函数，然后引用它两次。即，

函数setNavStyle（）{[…]}$（窗口）。滚动（设置导航样式）$（文件）。准备就绪（设置导航样式）。如果我们已经向下滚动页面，那么如何将
stickyNav
类添加到页面加载的正文中？我想，
$（窗口）。scroll（）
只在“真实”滚动之后才会被调用。@caramba你说得对。但是请注意，我在
setNavStyle
声明之后添加了
（）
，以及返回函数本身的返回行。这会导致调用它，然后将函数的返回值（即函数本身）传递给
$。滚动
。如果它仍然让人困惑，我可以将它编辑成更标准、更详细的样式。：）它仍然有点让人困惑。这正是我想要的，但我没有得到。函数被“调用”后，它在页面加载时被调用？为什么？哇，这就是我要找的，你答案的第二部分！如何在文档就绪时调用
setNavStyle（）
？因为如果我像往常一样调用它，我会得到
setNavStyle没有定义
我发布的代码已经在声明时调用了它。如果您不想在这个时候调用它，那么您应该正确地声明函数，然后引用它两次。即，
函数setNavStyle（）{[…]}$（窗口）。滚动（设置导航样式）$（文件）。准备就绪（设置导航样式）。如果我们已经向下滚动页面，那么如何将
stickyNav
类添加到页面加载的正文中？我想，
$（窗口）。scroll（）
只在“真实”滚动之后才会被调用。@caramba你说得对。但是请注意，我在
setNavStyle
声明之后添加了
（）
，以及返回函数本身的返回行。这会导致调用它，然后将函数的返回值（即函数本身）传递给
$。滚动
。如果它仍然让人困惑，我可以将它编辑成更标准、更详细的样式。：）它仍然有点让人困惑。这正是我想要的，但我没有得到。函数被“调用”后，它在页面加载时被调用？为什么？