Как поменять свойства CSS объекта?

Question

[Иван Смирнов]

Доброго времени суток!
Нужно чтобы при скроле у ".nav p" менялись свойства css стилей padding с одного значения на другое, я понял что это делается через js свойство .style.свойство и набросал небольшой код, но всё безуспешно:

<script>
        jQuery(function($) {
            $(window).scroll(function(){
                if($(this).scrollTop()> $("#navbar").position().top )
                    document.getElementById('nav p').style.padding = '0.5vw 1vw 0.5vw 0px';
                else
                    document.getElementById('nav p').style.padding = '1vw 1vw 1vw 0px';
                    
            });
        });
    </script>

<div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#menu1" data-href="#menu"><p>МУФТЫ</p></a></li>
                    <li><a href="#"><p>ПРАЙС-ЛИСТ<br>КОНТАКТЫ</p></a></li>
                    <li><a href="#"><p>ФОТО И<br>ВИДЕО</p></a></li>
                    <li><a href="#"><p>СЕРТИФИКАТЫ<br>КАЧЕСТВА</p></a></li>
                    <li><a href="#"><p>РЕЗЬБОНАКАТНЫЙ<br>СТАНОК RECO-40C</p></a></li>
                </ul>
</div>

.nav p {
    padding: 0.5vw 1vw 0.5vw 0px;
    text-align: center;
    font-size: 1.7vw;
    line-height: 1;
}

Comments

[Алексей Ярков]

Может вы стили и для id="navbar" покажете?

- - - - - - - - - - - - - - - - - - - - - - -
Расширение для сайта toster.ru:

Toster Tools

https://github.com/yarkovaleksei/toster-tools

Answer 1

[Evgeniy Kvasyuk]

document.getElementById('nav p') - вы тут пытаетесь поиску по Id скормить теги c с классом (причем неправильно)....и зачем, если у вас есть jQuery использовать нативный метод? используйте jQuery.
вот так, например:
$('.nav p').css({padding: '0.5vw 1vw 0.5vw 0px'})

Comments

[Иван Смирнов]

Благодаря вам всё заработало, спасибо!

[Иван Вишневский]

Иван Смирнов: а ещё лучше отказаться от jQuery и воспользоваться document.querySelector().

[Максим Соловьёв]

forgetable: не лучше. Старые браузеры не хотят с ним работать. Недавно на проекте напоролся.

[Evgeniy Kvasyuk]

forgetable: плюс нужно ручками еще делать перебор нодлиста, которые возвращаются querySelector, а jQuery нам сразу дает нужный инструмент

[Иван Вишневский]

Максим Соловьёв: babel?

[Иван Вишневский]

Evgeniy Kvasyuk: it depends. Просто нужно учитывать, что jQuery работает минимум в 2 раза медленнее на всех операциях, и уж для таких простых не стоит ее использовать.

Answer 2

[Alexander Pushkarev]

Если используете jQuery, то используйте его полностью - .css()