.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");
}
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.