Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Using jQuery Plugins Introducing jQuery Plugins Adding a Plugin to a Web Page

Posted by Breno Baldrati
Breno Baldrati
2,912 Points

there is a bug with the sticky nav on safari. the elements in the nav pile up when you scroll up. any ideas why?

there is also a problem when you scroll down. the sticky nav comes from the left and not from the top. anyone knows how to fix this issues? thanks.

2 Answers

Victor Ruiz
Victor Ruiz
16,570 Points
Victor Ruiz
Victor Ruiz
16,570 Points

Can you please add you code?

Breno Baldrati
Breno Baldrati
2,912 Points
Breno Baldrati
Breno Baldrati
2,912 Points

it occurs when you open any of the project files of the course, even the latest ones, and launch it through the workspace with safari, or if you download them and open locally. again, only on safari. 

<div class="row container animsition">
        <header class="row header">
          <div class="grid-third">
            <a href="index.html" class="logo"></a>
          </div>
          <div class="grid-third">
            <h1 class="description">We build apps</h1>
          </div>
          <div class="grid-third">
            <nav>
              <a href="#" class="active">Home</a>
              <a href="work.html" >Work</a>
              <a href="team.html" >Team</a>
            </nav>
          </div>
      </header>
</div>

nav {
  float: right;
}
nav a {
  transition: .35s linear;
  padding: 0 10px;
  font-weight: 500;
  line-height: 60px;
  color: #B1B9C1;
  text-align: right;
}
nav a:last-child {
  padding-right: 0;
}
nav a:hover {
  color: #333;
}
nav a.active {
  color: #465058
}

$('.header').sticky({
  getWidthFrom: '.container',
  responsiveWidth: true
});

$('.header').on('sticky-start', function () {
  $('.description').html('We build <strong>great</strong> apps');
});

$('.header').on('sticky-end', function () {
  $('.description').html('We build apps');
});

And of course there is the code for the whole sticky.js plugin.