鍍金池/ 問答/HTML/ jq 特效疑問？為啥if else不斷重復(fù)執(zhí)行？

jq 特效疑問？為啥if else不斷重復(fù)執(zhí)行？

圖片描述

如題，我想做一個當(dāng)滾動到頭部當(dāng)前選擇元素固定住，然后下來到原來的位置，當(dāng)前顯示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
    <style>
        html,
        body {
            padding: 0;
        }

        #header {
            line-height: 70px;
            text-align: center;
            background-color: red;
        }

        #nav {
            height: 30px;
            margin-top: 20px;
            background-color: blue;
        }

        #wrap {
            height: 1200px;
            background-color: #ccc;
            padding: 10px;
            padding-right: 20px;
        }

        #wrap .aside {
            float: left;
            width: 100px;
            height: 400px;
            background-color: green;
            float: left;
        }

        #wrap .main {
            background-color: white;
            overflow: hidden;
            height: 100%;
        }

        #footer {
            height: 30px;
            background-color: black;
            color: green;
        }
    </style>
</head>

<body>
    <div id="header">header</div>
    <div id="nav">nav</div>
    <div id="wrap">
        <div class="aside">aside</div>
        <div class="main">main</div>
    </div>
    <div id="footer">footer</div>
    <script>
        var this1;
        $.fn.stick = function () {
            this1 = this;
            $(window).on('scroll', function () {
                var wintop = $(window).scrollTop();
                if(wintop>=objtop){
                    console.log(1);
                    if(!this1.attr('inx')){
                        this1.hide();
                        cloneself.css({
                            'display': 'block',
                             'opacity': '1',
                             'position':'fixed',
                             'top':0,
                             'margin':0
                        })
                    }
                    this1.attr('inx','true');
                    return;
                }else{
                    if(!this1.attr('inx')){
                        return;
                    }else{
                        console.log(2);
                        cloneself.hide();
                        this1.show();
                        this1.removeAttr('inx');
                        return;
                    }
                }
                       
            })
        }
        $('#nav').stick();
        var objtop = $(this1).offset().top;
        var objwidth = $(this1).width();
        var objheight = $(this1).height();
        var cloneself = $(this1).clone();
        cloneself.css({
            'display': 'none',
            'opacity': '0',
            'width': objwidth,
            'height': objheight
        })
        cloneself.insertBefore(this1);
    </script>
</body>

</html>

出現(xiàn)這個if else永遠(yuǎn)在同時執(zhí)行的bug,不是if else只執(zhí)行一次嗎。為什么會出現(xiàn)這個bug?

如果我把代碼修改成這樣，就不會有這個問題。這是啥情況？

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
    <style>
        html,
        body {
            padding: 0;
        }

        #header {
            line-height: 70px;
            text-align: center;
            background-color: red;
        }

        #nav {
            height: 30px;
            margin-top: 20px;
            background-color: blue;
        }

        #wrap {
            height: 1200px;
            background-color: #ccc;
            padding: 10px;
            padding-right: 20px;
        }

        #wrap .aside {
            float: left;
            width: 100px;
            height: 400px;
            background-color: green;
            float: left;
        }

        #wrap .main {
            background-color: white;
            overflow: hidden;
            height: 100%;
        }

        #footer {
            height: 30px;
            background-color: black;
            color: green;
        }
    </style>
</head>

<body>
    <div id="header">header</div>
    <div id="nav">nav</div>
    <div id="wrap">
        <div class="aside">aside</div>
        <div class="main">main</div>
    </div>
    <div id="footer">footer</div>
    <script>
        var this1;
        $.fn.stick = function () {
            this1 = this;
            $(window).on('scroll', function () {
                var wintop = $(window).scrollTop();
                if(wintop>=objtop){
                    console.log(1);
                    
                   
                }else{
                    console.log(2);
                }
                       
            })
        }
        $('#nav').stick();
        var objtop = $(this1).offset().top;
        var objwidth = $(this1).width();
        var objheight = $(this1).height();
        var cloneself = $(this1).clone();
        cloneself.css({
            'display': 'none',
            'opacity': '0',
            'width': objwidth,
            'height': objheight
        })
        cloneself.insertBefore(this1);
    </script>
</body>

</html>

------------------------已經(jīng)解決，當(dāng)滾動距離小于當(dāng)前元素的的top值得時候，我直接remove掉了這個style,然后在恢復(fù)初始值，這樣就好了

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
    <style>
        html,
        body {
            padding: 0;
        }

        #header {
            line-height: 70px;
            text-align: center;
            background-color: red;
        }

        #nav {
            height: 30px;
            margin-top: 20px;
            background-color: blue;
        }

        #wrap {
            height: 1200px;
            background-color: #ccc;
            padding: 10px;
            padding-right: 20px;
        }

        #wrap .aside {
            float: left;
            width: 100px;
            height: 400px;
            background-color: green;
            float: left;
        }

        #wrap .main {
            background-color: white;
            overflow: hidden;
            height: 100%;
        }

        #footer {
            height: 30px;
            background-color: black;
            color: green;
        }
    </style>
</head>

<body>
    <div id="header">header</div>
    <div id="nav">nav</div>
    <div id="wrap">
        <div class="aside">aside</div>
        <div class="main">main</div>
    </div>
    <div id="footer">footer</div>
    <script>
        var this1;
        $.fn.stick = function () {
            this1 = this;
            $(window).on('scroll', function () {
                var wintop = $(window).scrollTop();

                if (wintop >= objtop) {
                    if (!this1.attr('inx')) {
                        this1.hide();
                        cloneself.css({
                            'display': 'block',
                            'opacity': '1',
                            'position': 'fixed',
                            'width': objwidth,
                            'height': objheight,
                            'top': 0,
                            'margin': 0
                        })
                    }
                    this1.attr('inx', 'true');
                    return;
                } else {
                    if (!this1.attr('inx')) {
                        return;
                    } else {
                        cloneself.removeAttr('style')
                        cloneself.css({
                            'display': 'none',
                            'opacity': '0',
                        })
                        this1.show();
                        this1.removeAttr('inx');
                        return;
                    }
                }

            })
        }
        $('#nav').stick();
        var objtop = $(this1).offset().top;
        var objleft = $(this1).offset().left;
        var objwidth = $(this1).width();
        var objheight = $(this1).height();
        var cloneself = $(this1).clone();
        cloneself.css({
            'display': 'none',
            'opacity': '0',
        })
        cloneself.insertBefore(this1);
    </script>
</body>

</html>
回答
編輯回答
維他命
  1. 綁定了 scroll事件，每次滾動都會觸發(fā)，
  2. 觸發(fā)滾動便會產(chǎn)生判斷，打印 1
2017年4月4日 09:32
編輯回答
空痕

$(window).on('scroll', function (){}

滾動條滾動事件 ，你一直在滾動呀

2017年1月31日 18:41
編輯回答
情皺

scroll是個高頻事件，發(fā)生時會短時間內(nèi)不斷觸發(fā)，jQ在這里只是幫你把兼容封裝了一下(MDN的scroll事件介紹里有兼容性相關(guān)的東西)，事件的防抖需要你自己去做。
另外下次如果碰到類似情況，事件里加debugger;語句打斷點(diǎn)單步跟一遍流程，你加console.log('1');一般只能是(粗略)判斷有沒有執(zhí)行到這個分支，具體邏輯是幫不上忙的。

2017年4月30日 01:06
編輯回答
撿肥皂

你沒有看到滾動條在一直動嗎。你使用的頁面布局方式，當(dāng)該元素顯示的時候會導(dǎo)致滾動條移動，所以滾動事件會不斷觸發(fā)。

兩種解決辦法，一種是調(diào)整頁面布局，二是在js中判斷，忽略由隱藏到顯示這個狀態(tài)改變帶來的突發(fā)滾動。

2017年11月6日 18:08
編輯回答
絯孑氣

樓上說的都是對的，你這個綁定了scroll 每次滾動都會觸發(fā)

2018年6月3日 14:58
編輯回答
未命名

觸發(fā)了滾動事件

2017年5月9日 20:52