Questions about jq special effects? Why does if else keep repeating?

such as the title, I want to make a when scrolling to the head of the currently selected element is fixed, and then down to the original position, the current display 

<!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;
        }

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

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

        -sharpwrap {
            height: 1200px;
            background-color: -sharpccc;
            padding: 10px;
            padding-right: 20px;
        }

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

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

        -sharpfooter {
            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;
                    }
                }
                       
            })
        }
        $("-sharpnav").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>

does not the bug, that the if else always executes at the same time be executed only once by the if else? Why does this bug?

appear?

if I changed the code like this, I wouldn"t have this problem. What"s going on? 

<!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;
        }

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

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

        -sharpwrap {
            height: 1200px;
            background-color: -sharpccc;
            padding: 10px;
            padding-right: 20px;
        }

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

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

        -sharpfooter {
            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);
                }
                       
            })
        }
        $("-sharpnav").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>

-it has been solved that when the scrolling distance is less than the top of the current element, I directly remove the style, and then restore the original value, which is fine 

<!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;
        }

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

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

        -sharpwrap {
            height: 1200px;
            background-color: -sharpccc;
            padding: 10px;
            padding-right: 20px;
        }

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

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

        -sharpfooter {
            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;
                    }
                }

            })
        }
        $("-sharpnav").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>
Javascript
Mar.03,2021

can't you see that the scroll bar is moving all the time? The page layout you use will cause the scroll bar to move when the element is displayed, so scrolling events will be triggered constantly.

there are two solutions, one is to adjust the page layout, and the other is to judge in js and ignore the sudden scrolling caused by the state change from hiding to showing.

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

Scroll bar scrolling event, you have been scrolling

triggered a scrolling event

  1. binds the scroll event, which is triggered every time you scroll.
  2. when scrolling is triggered, a judgment is generated. Print 1

scroll is a high-frequency event, which will be triggered continuously in a short time when it occurs. JQ only encapsulates the compatibility for you here (there is something related to compatibility in MDN's scroll event introduction). You need to do anti-shaking of the event yourself.
in addition, next time if you encounter a similar situation, add debugger; statement breakpoint to follow the process step by step, you add console.log ('1'); generally only (roughly) judge whether the branch has been executed, the specific logic is not helpful.

what you said upstairs is true. Your bound scroll will trigger every scrolling

.

Previous: How do vue-cli-generated projects request configuration agents individually?

Next: After changing the server, Wechat official account program stopped recording failed, solve?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e9fabe-4784b.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e9fabe-4784b.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?