Sticky top bar with content above

[marc-thomas]

I have followed the steps outlined in this issue

#653

And everything works, only problem is that I have a logo and some social icons above the top bar, and the sticky jumps to the top of the page as soon as you start scrolling, instead of waiting until the topbar hits the top of the window.

Is there anyway to fix this?

<header id="masthead" class="site-header" role="banner">
	<div class="header-top clearfix">
		<div class="row">
			<div class="small-7 columns text-left dates">
				<span>City, BC</span>
				<span>November 9 - 19, 2017</span>
			</div>
			<div class="small-5 columns text-right social">
				<a href="#" target="_blank"><i class="fa fa-facebook-square"></i></a>
				<a href="#" target="_blank"><i class="fa fa-twitter-square"></i></a>
				<a href="#" target="_blank"><i class="fa fa-instagram"></i></a>
			</div>
		</div>
		<div class="row">
			<div class="small-12 text-center">
				<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img class="logo" src="<?php echo get_template_directory_uri();?>/assets/images/logo.png" alt="<?php bloginfo( 'name' ); ?>" /></a>
			</div>
		</div>
	</div>
	<div class="top-bar-container" data-sticky-container>
		<div class="sticky" data-sticky data-options="anchor: page; marginTop: 0; stickyOn: small;" style="width:100%; z-index: 9999">
			<div class="title-bar" <?php foundationpress_title_bar_responsive_toggle() ?>>
				<button class="menu-icon" type="button" data-toggle="<?php foundationpress_mobile_menu_id(); ?>"><i class="fa fa-bars"></i> Menu</button>
			</div>
			<nav id="site-navigation" class="main-navigation top-bar" role="navigation" data-options="sticky_on: large">
				<div class="top-bar-center">
					<?php foundationpress_top_bar_r(); ?>
					<?php if ( ! get_theme_mod( 'wpt_mobile_menu_layout' ) || get_theme_mod( 'wpt_mobile_menu_layout' ) === 'topbar' ) : ?>
						<?php get_template_part( 'template-parts/mobile-top-bar' ); ?>
					<?php endif; ?>
				</div>
			</nav>
		</div>
	</div>
</header>

[linuxbastard]

You need to set "data-top-anchor" to some other ID than "page" on your sticky element, to make it sticky only after scroll has reached that anchor.

So in your case, I would set an ID for your ".header" div, and then set "data-top-anchor="IDofheader:bottom".

Sticky advanced example

[marc-thomas]

Awesome!!! thank you @linuxbastard