$(document).ready(function(){

    "use strict";

    // Show Navbar background on scroll
    $(window).scroll(function(){
        
        var top = $(window).scrollTop();
         if(top>=100){
           $('.navbar').css('background','linear-gradient(135deg, rgba(22, 37, 43, 1) 0%, rgba(22, 37, 43, 1) 100%)'); 
         }
         
         else 
             if($('.navbar').css('background','linear-gradient(135deg, rgba(22, 37, 43, 1) 0%, rgba(22, 37, 43, 1) 100%)')){

                 $('.navbar').css('background','linear-gradient(135deg, rgba(44, 51, 56, 0) 0%, rgba(44, 51, 56, 0) 100%)'); 
             }
     });



     // Animate loader off screen
     $('.se-pre-con').fadeOut('slow');


     // Add smooth scrolling to all links
     $("a").on('click', function(event) {
      
        // Make sure this.hash has a value before overriding default behavior
        if (this.hash !== "") {
          // Prevent default anchor click behavior
          event.preventDefault();
    
          // Store hash
          var hash = this.hash;
    
          // Using jQuery's animate() method to add smooth page scroll
          // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
          $('html, body').animate({
            scrollTop: $(hash).offset().top
          }, 800, function(){
       
            // Add hash (#) to URL when done scrolling (default click behavior)
            window.location.hash = hash;
          });
        } // End if
      });
});



let app = new Vue({
  el: '#discover',
  data: {
      image: 'images/feature-1.png',
      variants: [
                      {
                          variantImg: 'images/feature-2.png'
                      },
                      {
                          variantImg: 'images/feature-2.png'
                      },
                      {
                        variantImg: 'images/feature-3.png'
                      },
                      {
                        variantImg: 'images/feature-4.png'
                      },
                      {
                        variantImg: 'images/feature-5.png'
                      },
                      {
                        variantImg: 'images/feature-6.png'
                      },
                      {
                        variantImg: 'images/feature-7.png'
                      },
                      {
                        variantImg: 'images/feature-8.png'
                      }
          ],
  },
  methods: {
      changeSocks(color, title, inv) {
          this.image = color
      },
      clickA(){
        let buttons = document.querySelectorAll('.a-dis')
        buttons.forEach(item => { 
          item.addEventListener('click', (e) => {
          buttons.forEach( e => {
               e.classList.remove('li-active'); 
          });
          item.classList.add('li-active')
      })
      })
      }
  },

})