CODEWITHSUNDEEP
javascripthtmlcssvisual-studio
becca
becca

Reputation: 740

How to have a logo appear in sticky menu on scroll

I have a sticky sub-menu. When i scroll to a section on the page, this menu sticks to the top. However, I would like the logo to appear on scroll and be hidden when the sticky menu is not at the top.How would I accomplish that? Here is an example of what i am trying to do (you need to scroll part way down the page to see the sticky menu) - https://www.vidyard.com/platform/viewedit/

The logo and the 'get a demo' button are what i am trying to achieve. 

        var menu = document.querySelector('.menu-t')
        var menuPosition = menu.getBoundingClientRect().top;
        window.addEventListener('scroll', function () {
            if (window.pageYOffset >= menuPosition) {
                menu.style.position = 'fixed';
                menu.style.top = '0px';
            } else {
                menu.style.position = 'static';
                menu.style.top = '';
            }
        });
.page-section {
  border-bottom: 1px solid #ddd;
  overflow: hidden;
}

.page-section.page-section-center {
  align-content: center;
  text-align: center;
}


.menu-t {
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #FFF;
  z-index: 1000;
  border-bottom: 1px #eee dotted;
}
.menu-t li {
  display: inline-block;
  text-align: center;
  padding: 20px;
  text-transform: uppercase;
  font-size: 14px;
}
.menu-t a {
  display: block;
  padding: 10px 0;
  color: #32404E !important;
  -webkit-transition: color ease 0.3s;
  -o-transition: color ease 0.3s;
  transition: color ease 0.3s;
}
.menu-t a:hover {
  color: #2db2e9 !important;
}
<section class="page-section">
  <br/>
  <br/>
    <br/>
  <br/>
  </section>
<section class="page-section page-section-center hidden-xs hidden-sm">
    <ul class="menu-t">
      <li>ITEM</li>
        <li>
            <a href="#" class="text-thick">What Is</a>
        </li>
        <li>
        <a href="#" class="text-thick">How</a>
        </li>
        <li>
            <a href="#" class="text-thick">You're In Good Company</a>
        </li>
      <li>ITEM</li>
    </ul>
</section>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>

Upvotes: 2

Views: 1092

Answers (2)

Deep
Deep

Reputation: 9794

Try like this.

Create an img element within li element with display hidden at the the start and hide/show it on scroll.

var menu = document.querySelector('.menu-t')
        var menuPosition = menu.getBoundingClientRect().top;
        window.addEventListener('scroll', function () {
            if (window.pageYOffset >= menuPosition) {
                menu.style.position = 'fixed';
                menu.style.top = '0px';
                menu.firstElementChild.firstElementChild.style.display = "block";
                
            } else {
                menu.style.position = 'static';
                menu.style.top = '';
                menu.firstElementChild.firstElementChild.style.display = "none";
            }
        });
.page-section {
  border-bottom: 1px solid #ddd;
  overflow: hidden;
}

.page-section.page-section-center {
  align-content: center;
  text-align: center;
}


.menu-t {
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #FFF;
  z-index: 1000;
  border-bottom: 1px #eee dotted;
}
.menu-t li {
  display: inline-block;
  text-align: center;
  padding: 20px;
  text-transform: uppercase;
  font-size: 14px;
}
.menu-t a {
  display: block;
  padding: 10px 0;
  color: #32404E !important;
  -webkit-transition: color ease 0.3s;
  -o-transition: color ease 0.3s;
  transition: color ease 0.3s;
}
.menu-t a:hover {
  color: #2db2e9 !important;
}

.menu-t li img{
  display: none;
}
<section class="page-section">
  <br/>
  <br/>
    <br/>
  <br/>
  </section>
<section class="page-section page-section-center hidden-xs hidden-sm">
    <ul class="menu-t">
      
         <li>
            <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRJfyp7Gqe9jDGcVUgJIq0iTOOyzv6MkOthkXkAOzvqiiBPHceh"/>
        </li>
        <li>ITEM</li>
        <li>
            <a href="#" class="text-thick">What Is</a>
        </li>
        <li>
        <a href="#" class="text-thick">How</a>
        </li>
        <li>
            <a href="#" class="text-thick">You're In Good Company</a>
        </li>
      <li>ITEM</li>
    </ul>
</section>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>

Upvotes: 2

Robotnicka
Robotnicka

Reputation: 574

The logo in your example is there in the navbar the whole time. They use visibility: hidden; to begin, and then visibility: visible; when the scrollbar sticks to the top.

Upvotes: 0

Related Questions