Элемент в липком меню, толкаемый вниз на прокрутке

Привет :) Я немного намек, чтобы публиковать здесь, но я нахожусь в конце моего ума.Элемент в липком меню, толкаемый вниз на прокрутке

Я использую wordpress и тему - Cake - для веб-сайта компании.

Я пытаюсь установить динамическую кнопку для выравнивания с меню wordpress в липкой обертке (.menu_wrapper). Независимо от того, что я делаю - float, display и т. Д. - кнопка слегка перескакивает на свитке. Код в нужном месте, но я не могу назначить эту кнопку тем же классом, что и пункты меню wordpress - это ограничение (я думаю). Я бы предпочел удержать это место только с помощью CSS.

Я самоучка, узнаю, как я иду, бросил в этого человека и делаю все возможное. Я знаю, что это место полно реальных кодеров и экспертов, поэтому я протягивая :)

CSS-для .login_button является

.login_button { 
    display:inline !important; 
    margin-top: 38px !important; 
    float: left !important; 
    background:#e73f3a !important; 
    color:White !important; 
    font-family:roboto !important; 
    font-size:22px !important; 
    }

Вы можете увидеть эту проблему в игре здесь: https://netterrain.com - это кнопка LOG IN в красном цвете.

Я действительно очень ценю любую помощь, которую могут предложить любой. Спасибо :)

источник

2017-02-18 Johannah

Я бы удалите важные из них, это не идеально, чтобы использовать его, когда вы попадаете в специфические войны, когда пытаетесь переопределить правило. При прокрутке div с идентификатором Top_bar присваивается класс 'is-sticky', поэтому у вас может быть второе правило, которое выглядит примерно так:' # Top_bar.is-sticky .login_button {margin-top: 12px; } 'или же вы хотите, чтобы он выглядел, что бы переопределить 38px по умолчанию. У вас также есть чувствительные триггеры, поэтому вам может потребоваться добавить несколько правил. Надежда, которая поможет вам в пути. – PhilS

Ваша проблема заключается в том, что начальный margin-top, значение которого составляет 38 пикселей, должно быть изменено на 13 пикселей при запуске прокрутки.

Вам нужно добавить еще один класс на кнопку при прокрутке:

вы можете достичь этого с помощью JavaScript:

// on scroll, 
$(window).on('scroll',function(){ 

     $('.login_button').addClass('is-scrolling'); 
});

И в вашем CSS добавить это:

.login_button is .login_button .is-scrolling{ 

    margin-top: 13px !important; 
}

источник

2017-02-18 19:23:52

Работал красиво! Я очень ценю вашу помощь, Яхья! Спасибо! – Johannah

Gald ıt может помочь :) –

Элемент в липком меню, толкаемый вниз на прокрутке

ответ

Смежные вопросы