Sticky navbar with scroll indicator
The fixed sticky navigation when scrolling page from top 150px. Including the scroll indicator.
Thumbnail

.navbar-sticky.uk-background-default(uk-sticky='top: 150' class='uk-visible@m') each i in header each j in i.navbar div(uk-grid) .uk-padding-default-top.uk-padding-default-bottom.logo.uk-margin-left(style='width:325px;background-color:#ffe403') h1 a(href='/') img(src=j.src) .uk-width-expand.uk-position-relative ul.uk-flex.uk-flex-middle.uk-flex-right.uk-margin-left.navbar(style='width: calc(100% - 160px);height:100%; overflow:scroll') each k,index in j.nav if index===0 li.uk-active a.text-medium.uk-text-bold.uk-text-nowrap.link-secondary(href=k.href style="margin-right:25px; letter-spacing:2px")=k.text else li a.text-medium.uk-text-bold.uk-text-nowrap.link-secondary(href=k.href style="margin-right:25px; letter-spacing:2px")=k.text each l in j.navVideo a.uk-display-block.uk-position-center-right(style='width:140px' class="uk-visible@l") .uk-display-block.uk-background-cover(data-src=l.src uk-img style='width:100%;height:90px;') img.uk-position-center(src=l.icon style='width: 40px; z-index:10') .scrollIndicator.uk-background-secondary(style="height:6px;width:0;")
.navbar-sticky { position: fixed; width: 100%; top: 0; opacity: 0; pointer-events: none; transition: all .8s cubic-bezier(0.4, 0, 0.2, 1); transform: translateY(-100%); &.uk-sticky-fixed { opacity: 1; pointer-events: auto; transform: translateY(0); } & + .uk-sticky-placeholder {display:none!important} }
/** * Scroll Indicator */ window.onscroll = function () { scrollIndicatior() }; function scrollIndicatior() { var winScroll = document.body.scrollTop || document.documentElement.scrollTop; var height = document.documentElement.scrollHeight - document.documentElement.clientHeight; var scrolled = (winScroll / height) * 100; Array.from(vars.scrollIndicator).forEach(element=>{ element.style.width = scrolled + "%"; }) }
<div class="navbar-sticky uk-background-default uk-visible@m" uk-sticky="top: 150" style="z-index:10000"> <div uk-grid="uk-grid"> <div class="uk-padding-default-top uk-padding-default-bottom logo uk-margin-left" style="width:325px;background-color:#ffe403"> <h1><a href="/"><img src="<?php echo get_template_directory_uri(); ?>/assets/img/logo.svg"/></a></h1> </div> <div class="uk-width-expand uk-position-relative"> <ul class="uk-flex uk-flex-middle uk-flex-right uk-margin-left navbar scrollbar" style="width: calc(100% - 160px);height:100%; overflow:scroll"> <?php $navs = wp_get_nav_menu_items('main'); foreach($navs as $nav): ?> <li <?php echo ( $nav->object_id == get_queried_object_id() ) ? 'class="uk-active"':''; ?>><a class="text-medium uk-text-bold uk-text-nowrap link-secondary" href="<?php echo esc_attr($nav->url); ?>" style="margin-right:25px; letter-spacing:2px"><?php echo esc_html($nav->title); ?></a></li> <?php endforeach; ?> </ul> <?php $args_post = array( 'posts_per_page' => 1, 'tax_query' => array( array( 'taxonomy' => 'live', 'field' => 'slug', 'terms' => 'showinlive' ) ) ); $query_post = new WP_Query( $args_post ); if( $query_post->have_posts() ): while( $query_post->have_posts() ): $query_post->the_post();?> <a class="uk-display-block uk-position-center-right uk-visible@l icon-play" style="width:140px" href="<?php echo esc_attr(get_the_permalink()); ?>"> <div class="uk-display-block uk-background-cover" data-src="<?php echo (has_post_thumbnail())?get_the_post_thumbnail_url():get_template_directory_uri().'/assets/img/default_image.png'; ?>" uk-img style="width:100%;height:90px;"></div> <span class="uk-position-center" style='transform: translate(-50%,-50%) scale(.3); z-index:10;'> <svg xmlns="http://www.w3.org/2000/svg" width="147" height="147"><g data-name="Group 2043" transform="translate(-887 -5791)"><circle data-name="Ellipse 1" cx="73.5" cy="73.5" r="73.5" transform="translate(887 5791)" fill="#fff" opacity=".251"/><g data-name="Ellipse 1 copy" transform="translate(887 5791)" fill="rgba(255,255,255,0)" stroke="rgba(255,255,255,0.65)" stroke-linejoin="round" stroke-width="3"><circle cx="73.5" cy="73.5" r="73.5" stroke="none"/><circle cx="73.5" cy="73.5" r="72" fill="none"/></g><path data-name="Shape 11" d="M984.64 5864.508l-37.643-21.511v43.016l37.64-21.508" fill="#fff"/></g></svg> </span> </a> <?php endwhile; wp_reset_postdata();endif; ?> </div> </div> <div class="scrollIndicator uk-background-secondary" style="height:6px;width:0;"></div> </div>
Tags: