.topline
     .container
            .row
                .flex
                    nav.top_menu
                        ul.nav__wrap
                            li.nav__item 123
                            li.nav__item 123
                            li.nav__item 123
                            li.nav__item 1123 
                            li.nav__item 123
                            li.nav__item 123
.block
View Compiled
.topline {
    @include md(margin-bottom, 80px);
    position: absolute;
    z-index: 99999;
    top: 0;
    right: 0;
    left: 0;
    padding: 0.9375rem 0;
    transition: top 1s;
    background: red;

    .container {
        max-width: 1440px;
        // padding-left: 2rem;
        // padding-right: 2rem;
    }
}

.logo {
    @include md(width, 120px);
    cursor: pointer;

    img {
        width: 100%;
    }
}

.flex {

    @include md(position, fixed);
    @include md(height, 80px);
    @include md(left, 0);
    @include md(right, 0);
    @include md(top, 0);
    @include md(background-color, #fff);
    @include md(box-shadow, 0 5px 15px rgba(68, 66, 66, 0.08));
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.top_menu {
    @include md(display, none);
}
.nav__wrap {
  display: flex
    
}
li {
  list-style: none
}

.block {
  width: 100%;
  background: green;
  height: 7000px
}

.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    background: white;
    box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
$(window).scroll(function () {
    if ($(this).scrollTop() > 100) {
      console.log('asdasd')
        $(".topline").css("top", "-100px");
        $(".topline").css("transition", "top .6s");
        if ($(this).scrollTop() > 500) {
            $(".topline").css("top", "0");
            $(".topline").addClass("fixed");
        } else {
            $(".topline").removeClass("fixed");
            $(".topline").css("transition", "none");
        }
    } else {
        $(".topline").css("top", "0");
    }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.