Статический Navbar CSS с тенью с Shadow на прокрутке для приложений VUE

Я впервые написал об этом В моем блоге – На самом деле только для моей личной ссылки, так как мне снова понадобится этот код в моем следующем проекте. Но подумал, что я тоже поделюсь здесь.

Если вы не используете Tailwind для ваших потребностей в CSS – я очень рекомендую его. Теперь это основной продукт моего инструментария по созданию продуктов, и он просто хорошо вписывается в Vue.js и Nuxt Workflows, которые я не могу представить, что я не могу переехать к чему -то еще.

Одна вещь о Tailwind – это оставляет вам JavaScript. Это так библиотека.

Для большинства моих проектов я хочу эту плавную тень под Navbar – вот код, который я использую для его достижения.

HTML

Здесь мы добавляем .scrolled класс, когда значение в view.attopofpage является ложным.

CSS

У меня есть компонент NAVBAR, который я использую на протяжении всего приложения, поэтому этот код пойдет туда. PS: Да, это технически SCSS …

nav {
    z-index: 10
}

nav.scrolled {
    @apply shadow-2xl;
    border-bottom: 0px;
}

Примените тень на Navbar, когда у него есть класс Прокрутка Анкет

JavaScript

// in data, I like to store a view object with all 
// the values I need for a component to manage 
// it's 'view' state - ie loading, 
// or in this case, if the user is at the top of the page or not
data () {
    return {
        view: {
            atTopOfPage: true
        }
    }
},

// a beforeMount call to add a listener to the window
beforeMount () {
    window.addEventListener('scroll', this.handleScroll);
},

methods: {
    // the function to call when the user scrolls, added as a method
    handleScroll(){
        // when the user scrolls, check the pageYOffset
        if(window.pageYOffset>0){
            // user is scrolled
            if(this.view.atTopOfPage) this.view.atTopOfPage = false
        }else{
            // user is at top of page
            if(!this.view.atTopOfPage) this.view.atTopOfPage = true
        }
    }
}

Результат

Массовые гладкие тени на вашей навигации. Проверьте это в действии на моем продукте Referextra.com

Оригинал: “https://dev.to/chipd/tailwind-css-static-navbar-with-shadow-on-scroll-for-vue-applications-46o5”