滚动顶部按钮时如何更改按钮颜色

Question

我有一个小问题，现在当我单击按钮时会更改颜色，但是当我滚动页面并且按钮栏固定在顶部时我需要灵魂，我想从页面中获取 id 将其传递到顶部按钮栏这是css代码和html代码

 $(window).scroll(function (e) {
                    var $el = $('.fixedElement');
                    var isPositionFixed = ($el.css('position') == 'fixed');
                    if ($(this).scrollTop() > 200 && !isPositionFixed) {
                        $el.css({'position': 'fixed', 'top': '0px'});
                    }
                    if ($(this).scrollTop() < 200 && isPositionFixed) {
                        $el.css({'position': 'static', 'top': '10px'});
                    }
                });
                // Just for testing, show all items
                $('a.btn.continue').click(function () {
                    $('li.items').show(400);
                });

    span {
                cursor: auto;
            }
            .number{
                margin:100px;
            }
            .minus, .plus{
                width:20px;
                height:20px;
                background: #009688;
                border-radius:4px;
                padding:8px 5px 8px 5px;
                border:1px solid #ddd;
                display: inline-block;
                vertical-align: middle;
                text-align: center;
            }
            input{
                height:34px;
                width: 100px;
                text-align: center;
                font-size: 26px;
                border:1px solid #ddd;
                border-radius:4px;
                display: inline-block;
                vertical-align: middle;
            }
            .two-col-special {
                border: 1px dotted blue;
                overflow: auto;
                margin: 0;
                padding: 0;
            }

            .two-col-special li {
                display: inline-block;
                width: 45%;
                margin: 0;
                padding: 0;
                vertical-align: top; /* In case multi-word categories form two lines */
            }
            .two-col-special li:before {
                content: '+';
                padding: 5px;
                margin-right: 5px; /* you can tweak the gap */
                color: orange;
                background-color: white; /* in case you want a color... */
                display: inline-block;
            }
            div.scrollmenu {
                background-color: transparent;
                overflow: auto;
                white-space: nowrap;
            }

            div.scrollmenu p {
                display: inline-block;
                color: white;
                text-align: center;
                padding: 14px;
                text-decoration: none;
            }

            div.scrollmenu p:hover {
                background-color: transparent;
                color: #323232;

            }

            body {
                font: 200 16px/1 sans-serif;
            }

            img {
                max-height: 10rem;
            }

            #overlay {
                position: fixed;
                z-index: 99999;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                background: rgba(0, 0, 0, 0.9);
                transition: 1s 0.4s;
            }

            #progress {
                height: 1px;
                background: #fff;
                position: absolute;
                width: 0; /* will be increased by JS */
                top: 50%;
            }

            #progstat {
                font-size: 0.7em;
                letter-spacing: 3px;
                position: absolute;
                top: 50%;
                margin-top: -40px;
                width: 100%;
                text-align: center;
                color: #fff;
            }
            .column {
                float: left;
                width: 100%;
                padding: 10px;
                box-shadow: #009688;
                
            }

            .column img {
                margin-top: 10px;
            }

            /* Clear floats after the columns */
            .row:after {
                content: "";
                display: table;
                clear: both;
            }
            * {
                box-sizing: border-box;
            }
            @font-face {
                font-family: myFirstFont;
                src: url(../fonts/DG-Heaven-Regular.ttf);
            }
            @font-face {
                font-family: mySecoundFont;
                src: url(../fonts/TheSansArab-Plain.ttf);
            }
            * {
                font-family: myFirstFont;
            }

            /*            @font-face {
                            font-family: myFirstFont;
                            src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.woff2) format('woff2');
                        }
            
                        @font-face {
                            font-family: myFirstFont;
                            src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.woff2) format('woff2');
                            font-weight: bold;
                        }
            
                        * {
                            font-family: myFirstFont;
                        }*/
            .button{
                background: #323232;
                color: white;
                font-size: 15px;
                border: 1px solid #323232;
                border-radius: 8px;
                height: 70px;
                width: fit-content;
                text-align: center;
            }
            .button:hover {
                background-color: #009688;
                color: #9d7d08;
            }

            .button:focus, .button:active {
                background: #3ab9a4;
                color: white;
                border: 1px solid #009688;
                border-radius: 8px;
            }
            .sidemenubtn{
                background: #323232;
                color: white;
                font-size: 13px;
                border:  0.05px solid transparent;
                border-bottom: 1px solid #9d7d08;
                border-top: 0.05px solid #68a38e;
                border-radius: 1px;
                height: 70px;
                width: 100%;
                /*margin: 1px;*/
            }

            .sidemenubtn:hover{
                background: #009688;
                color: #FFF;
                border: 1px solid transparent;
                border-bottom: 0.05px solid #FFF;
                border-top: 0.05px;
                height: 70px;
                width: 100%;
            }
            * {
                margin: 0;
            }

            .container {
                position: relative;
                text-align: center;
                color: white;
            }

            .bottom-left {
                position: absolute;
                bottom: 8px;
                left: 16px;
            }

            .top-left {
                position: absolute;
                top: 8px;
                left: 16px;
            }

            .top-right {
                position: absolute;
                top: 8px;
                right: 16px;
            }

            .bottom-right {
                position: absolute;
                bottom: 8px;
                right: 16px;
            }

            .centered {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);

            }
            .fixedElement2 {
                background-color: #FFF;
                position:fixed;
                top:300px;
                width:100%;
                z-index:200;
            }
            .fixedElement {
                background-color: #FFF;
                position:relative;
                top:0px;
                width:100%;
                z-index:100;
            }

<div class="translate " id="groups2" onclick="closeNav()">
<button id="16" class="button" ><p>Foul</p></button>
<button id="17" class="button" ><p>Gelabah</p></button>
<button id="18" class="button" ><p>Salts Motabag</p></button>
<button id="19" class="button"><p>Sweet Motabag</p></button>
</div>
<!-- -->
<h2 id="34" style="color: black;" class="menu-group">Foul</h2>
<div id="result" class="button.active" dir="ltr">
<div id="undefined" class="menu-item translate ">
<div class="menu-group">
<h3 class="menu-item-heading ">
<img onclick="showItemsModalAr(undefined,12.00,480)" id="itemimg" src="https://www.shorouknews.com/uploadedimages/Other/original/fhgdxhxdfhgdfhgxdf.jpg" alt="undefined" class="menu-item-img">
<div>
<!-- -->
<span class="menu-item-name" style="text-align: center;" id="itemn">Foul with eggs</span>
<p class="menu-item-desc"></p>
<br><a><i class="fa fa-heart" style="color: #3ab9a4; font-size:26px; padding-right: 50px;"></i></a>
<a onclick="showItemsModalAr(undefined,12.00,480)"><i class="fa fa-cart-plus" style="color: #3ab9a4; font-size:30px; padding-right: 40px;"></i></a></div>
</h3></div>
</div>
</div>
<!-- -->
<h2 id="34" style="color: black;" class="menu-group">Gelabah</h2>
<div id="result" class="button.active" dir="ltr">
<div id="undefined" class="menu-item translate ">
<div class="menu-group">
<h3 class="menu-item-heading ">
<img onclick="showItemsModalAr(undefined,6.00,690)" id="itemimg" src="https://i.postimg.cc/CxRnR0y9/قلابة.jpg" alt="undefined" class="menu-item-img">
<div>
<span class="menu-item-name" style="text-align: center;" id="itemn">Regular Gelabah</span>
<p class="menu-item-desc">Gelabah Foul By hijazy way</p>
<br><a><i class="fa fa-heart" style="color: #3ab9a4; font-size:26px; padding-right: 50px;"></i></a>
<a onclick="showItemsModalAr(undefined,6.00,690)"><i class="fa fa-cart-plus" style="color: #3ab9a4; font-size:30px; padding-right: 40px;"></i></a></div>
</h3></div>
</div>
</div>
<!-- -->
<h2 id="34" style="color: black;" class="menu-group">Salts Motabag</h2>
<div id="result" class="button.active" dir="ltr">
<div id="undefined" class="menu-item translate ">
<div class="menu-group">
<h3 class="menu-item-heading ">
<img onclick="showItemsModalAr(undefined,10.00,290)" id="itemimg" src="https://i.ibb.co/Rj8rCBj/image.jpg" alt="undefined" class="menu-item-img">
<div>
<span class="menu-item-name" style="text-align: center;" id="itemn">Cream Cheese Motabag</span>
<p class="menu-item-desc">Prepared by cream cheese</p>
<br><a><i class="fa fa-heart" style="color: #3ab9a4; font-size:26px; padding-right: 50px;"></i></a>
<a onclick="showItemsModalAr(undefined,10.00,290)"><i class="fa fa-cart-plus" style="color: #3ab9a4; font-size:30px; padding-right: 40px;"></i></a></div>
</h3></div>
</div>
</div>
<!-- -->
<div id="result" class="button.active" dir="ltr">
<div id="undefined" class="menu-item translate ">
<div class="menu-group">
<h3 class="menu-item-heading ">
<img onclick="showItemsModalAr(undefined,10.00,530)" id="itemimg" src="https://i.ibb.co/k0X6cdW/image.jpg" alt="undefined" class="menu-item-img">
<div>
<span class="menu-item-name" style="text-align: center;" id="itemn">Vegetables Motabag</span>
<p class="menu-item-desc">Prepared by a quality vegetables</p>
<br><a><i class="fa fa-heart" style="color: #3ab9a4; font-size:26px; padding-right: 50px;"></i></a>
<a onclick="showItemsModalAr(undefined,10.00,530)"><i class="fa fa-cart-plus" style="color: #3ab9a4; font-size:30px; padding-right: 40px;"></i></a></div>
</h3></div>
</div>
</div>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

滚动按钮时我所需要的就是将颜色更改为页面上显示的项目的 id

Answer 1

I solved the issue with this code 



    // this for scroll the page to change the color of groups
    $(document).ready(function () {
        $.fn.isInViewport = function () {
            var elementTop = $(this).offset().top;
            var elementBottom = elementTop + $(this).outerHeight();

            var viewportTop = $(window).scrollTop();
            var viewportBottom = viewportTop + $(window).height();

            return elementBottom > viewportTop && elementTop < viewportBottom;
        };
        $(window).scroll(function () {
            var lastElem = null;

// this lone for calling the class div 
            $('.menug').each(function (i) {
                if ($(this).isInViewport()) {
                    lastElem = $(this);

                }
            });

            if (lastElem != null) {
                console.clear();
                console.log(lastElem.attr("id"));

// this variable for get div id when scroll
 
                var divID = lastElem.attr("id");

// this variable for get id by class name when scroll 
                const elements = document.querySelectorAll('.grSelected');

                elements.forEach(element => {
                    // do something with each element
                    element.id;

                    if (divID == element.id) {
                        lastElem = $(this);
// this for change color if the div id is match with button id 
                        let rr = document.getElementById(element.id);
                        rr.id;
                        rr.style = " background: #3ab9a4; color: white; font-size: 15px; border: 1px solid #323232;  border-radius: 8px; height: 70px; width: fit-content; text-align: center;";
    //                    console.log(rr);

                    } else {
                        let rr = document.getElementById(element.id);
// this for change color if the div id is not matching with button id 

                        rr.id;
                        rr.style = " background: #323232; color: white; font-size: 15px; border: 1px solid #323232;  border-radius: 8px; height: 70px; width: fit-content; text-align: center;";
    //                    console.log(rr);
                    }
                });
            }
        }).scroll();
    });