Sticky is causing others divs to glitch

I created a navbar with a submenu. The navbar has an image as a logo. Used Javascript to create sticky. The problem is, when I open the submenu when sticky is active, the logo(image) is glitching. I'm not facing this problem if the logo is pure text. I tried for hours to figure out the problem. Wrapped the entire navbar in multiple combinations of divs but couldn't solve the issue. Further, the glitch occurs at random times- which is freaking me out more. I'm attaching part of my code here. Can anyone tell me what is causing the error

  function isInViewport(element) {
    const rect = element.getBoundingClientRect();
    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
  }

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
var scrollHeight = document.body.scrollHeight;

function scrollDetect() {
  var lastScroll = 0;
  window.onscroll = function() {
    let currentScroll = document.documentElement.scrollTop || document.body.scrollTop; // Get Current Scroll Value

    if (currentScroll > 0 && lastScroll <= currentScroll) {
      lastScroll = currentScroll;
      navbar.classList.remove("sticky");
      navbar.classList.remove("z-index-999999");
    } else {
      lastScroll = currentScroll;
      navbar.classList.add("sticky");
      navbar.classList.add("z-index-999999");
    }

    if (currentScroll < 100) {
      navbar.classList.remove("sticky");
      navbar.classList.remove("z-index-999999");
    }

  };
}

scrollDetect();

.main-navbar {
  position: absolute;
  display: inline-flex;
  background-color: white;
  top: 3.7rem;
  width: 100%;
  height: 4.5rem;
}


/*Code for Sticky*/

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  transition: 0.3s height ease-in-out;
  -webkit-transition: 0.3s height ease-in-out;
  -moz-transition: 0.3s height ease-in-out;
  -ms-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  animation: faceInEffect 0.3s;
  -webkit-animation: faceInEffect 0.3s;
}

.logo img {
  position: relative;
  margin-right: 11.1rem;
  left: 9%;
  margin-top: -3px;
  width: 330px;
}

.nav-list {
  font-size: 1rem;
  display: flex;
  width: 30%;
  margin-top: .7rem;
  margin-left: 2.7rem;
}

.nav-list li {
  position: relative;
}

.nav-list>li>a {
  color: black;
  display: block;
  font-size: 1.05rem;
  font-weight: 500;
  padding: 1.3rem 1rem;
}

.sub-menu {
  display: flex;
  position: absolute;
  box-sizing: border-box;
  background-color: white;
  visibility: hidden;
  top: 3.8rem;
  left: -34.4rem;
  width: 89.89rem;
  height: 35rem;
  z-index: 100;
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
}

.sub-menu a {
  position: relative;
  top: 2rem;
  color: black;
  font-size: 1.1rem;
  font-weight: 200;
  padding: 3rem 40px 0 40px;
}

.nav-list>li:hover .sub-menu {
    visibility: visible;
}

.z-index-999999{
z-index: 999999999;
}

<div class="main-navbar" id="navbar">
  <div class="logo">
    <a><img src="https://static.nike.com/a/images/q_auto:eco/t_product_v1/f_auto/dpr_2.0/w_441,c_limit/9d1635ed-eed0-45b0-b34d-e00468e2f79e/tanjun-easyon-shoes-mplG1H.png" alt=""></a>
  </div>
  <nav>
    <ul class="nav-list">
      <li class="dropdown-item-1">
        <a href="">Men</a>
        <ul class="sub-menu">
          <li><a href="#">shirts</a> </li>
          <ul>
      </li>
      <ul>
  </nav>
</div>

from Sticky is causing others divs to glitch

Is there a better way to recognize and update the in-line style of an element during a swipe gesture?

I've been working on a left swipe gesture handler for bubbles in a chat. touchMove and touchStart would probably be the next step, but right now I'm trying to get this to work just for PC/web.

I kind of got it working, but I feel like there is a much better way, than just updating the inline transform style for each bubble. It doesn't feel quite as natural as I'd expect it to.

I've also tried a "hacky" way with scroll-snap, but I couldn't quite get it to work.

Ideally, I'd love a pure CSS solution, but I'll take what I can get. Is the below approach most likely the only one I can use?

// App.tsx
import * as React from "react";
import "./styles.css";
import { createSwipeHandlers } from "./createSwipeHandlers";

const BubbleRow = React.memo(
  ({
    messageText,
    setSelectedMessage,
    isLastBubble
  }: {
    messageText: string;
    setSelectedMessage: (messageText: string) => void;
    isLastBubble: boolean;
  }) => {
    const bubbleRef = React.useRef<HTMLDivElement>(null);

    const handleLeftSwipe = React.useCallback((dist: number) => {
      if (bubbleRef.current) {
        if (dist > 72) {
          //@ts-expect-error
          bubbleRef.current.style.transform = null;
          setSelectedMessage(messageText);
          return;
        }

        bubbleRef.current.style.transform = `translateX(-${dist}px)`;
      }
    }, []);

    const { mouseStart, mouseMove, mouseOut, mouseStop } = createSwipeHandlers({
      leftSwipeHandler: handleLeftSwipe,
      swipeStopHandler: (e: any) => {
        if (bubbleRef.current) {
          //@ts-expect-error
          bubbleRef.current.style.transform = null;
        }
      }
    });

    const className = `row${isLastBubble ? " last-bubble-row" : ""}`;
    return (
      <div className={className}>
        <div
          ref={bubbleRef}
          className={"bubble"}
          onMouseDown={mouseStart}
          onMouseMove={mouseMove}
          onMouseOut={mouseOut}
          onMouseLeave={mouseStop}
          onMouseUp={mouseStop}
        >
          {messageText}
        </div>
      </div>
    );
  }
);

const Footer = React.memo(
  ({
    selectedMessage,
    setSelectedMessage
  }: {
    selectedMessage: string | null;
    setSelectedMessage: (selectedMessage: null) => void;
  }) => {
    const clearSelectedMessage = React.useCallback(() => {
      setSelectedMessage(null);
    }, []);

    if (!selectedMessage) return null;

    return (
      <div key={selectedMessage} className="footer">
        <span>{selectedMessage}</span>
        <span onClick={clearSelectedMessage} className="clear-button">
          {"×"}
        </span>
      </div>
    );
  }
);

const numberOfChatBubbles = 5;
export const App = () => {
  const [selectedMessage, setSelectedMessage] = React.useState<string | null>(
    null
  );

  return (
    <div className="wrapper">
      <div className="container">
        {Array.from({ length: numberOfChatBubbles }, (_, index) => (
          <BubbleRow
            messageText={`Text for message ${index + 1}`}
            setSelectedMessage={setSelectedMessage}
            isLastBubble={index + 1 === numberOfChatBubbles}
          />
        ))}
        <Footer
          selectedMessage={selectedMessage}
          setSelectedMessage={setSelectedMessage}
        />
      </div>
    </div>
  );
};

const createSwipeHandlers = ({
  leftSwipeHandler,
  swipeStopHandler,
  minSwipeDist = 5
}: {
  leftSwipeHandler?: (dist: number) => void;
  swipeStopHandler?: (e: React.MouseEvent<HTMLDivElement>) => void;
  minSwipeDist?: number;
}) => {
  let xDown: number | null = null;
  let yDown: number | null = null;

  return {
    mouseStart: ((e: React.MouseEvent<HTMLDivElement>) => {
      xDown = e.clientX;
      yDown = e.clientY;
    }) as React.MouseEventHandler,
    mouseMove: ((e: React.MouseEvent<HTMLDivElement>) => {
      if (!xDown || !yDown) return;

      const xUp = e.clientX;
      const yUp = e.clientY;

      const xDiff = xDown - xUp;
      const xDiffAbs = Math.abs(xDiff);
      const yDiff = yDown - yUp;
      const yDiffAbs = Math.abs(yDiff);

      if (xDiffAbs > yDiffAbs && xDiff > 0 && xDiffAbs > minSwipeDist) {
        leftSwipeHandler?.(xDiffAbs);
      }
    }) as React.MouseEventHandler,
    mouseOut: ((e: React.MouseEvent<HTMLDivElement>) => {
      xDown = null;
      yDown = null;
    }) as React.MouseEventHandler,
    mouseStop: ((e: React.MouseEvent<HTMLDivElement>) => {
      xDown = null;
      yDown = null;
      swipeStopHandler?.(e);
    }) as React.MouseEventHandler
  };
};

// styles.css
* {
  outline: none;
  box-sizing: border-box;
  margin: 0;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}

.container {
  border: 1px solid black;
  height: 500px;
  width: 400px;
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding: 8px;
}

.bubble {
  display: flex;
  align-items: center;
  background-color: gray;
  padding: 12px;
  border-radius: 12px 12px 3px 12px;
  transition: 0.04s linear;
  height: fit-content;
  user-select: none;
}

.last-bubble-row {
  flex-grow: 1;
}

@keyframes blinkFade {
  0%,
  100% {
    filter: brightness(1);
  }

  20% {
    filter: brightness(0.4);
  }
}

.footer {
  height: 64px;
  width: 100%;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  animation: blinkFade 1.5s;
  background-color: gray;
}

.clear-button {
  cursor: pointer;
  font-size: 32px;
}

Currently looks like this:

from Is there a better way to recognize and update the in-line style of an element during a swipe gesture?

Downloading auxiliary data with anaconda prompt

I'm following the steps here. So I used the following code to install dependencies,

  conda create -n polymer -c conda-forge mamba
  conda activate polymer
  mamba env update -f environment.yml

But in the next step, I couldn't download auxiliary data by,

make auxdata_all

Edit:

As suggested by @Musabbir Arrafi, I first installed make package and cd into the folder which ther is makefile in it. Then after uaing make auxdata_all command I get this error:

The syntax of the command is incorrect.
make: ***[makefile:68: directories] Error 1

I searches a lot for this exact error but with no result. Can you help me to fix this error?

from Downloading auxiliary data with anaconda prompt