CSS: центральная фиксированная кнопка по горизонтали и анимированная верхняя граница поля.

Question

Я застрял здесь от проблемы. Я чувствую, что мои знания в области css прекратились раз и навсегда. Моя проблема следующая. Как вы можете видеть на картинке, у меня есть фиксированный заголовок, панель заголовка и кнопка, все плавающие поверх другого содержимого, а не перемещение, если пользователь прокручивает.

.headerBarGreen { 
     background-color: #7ac4a7; 
     width: 100%; 
     height: 5px; 
     margin-top: 70px; 
     position: fixed; 
     -webkit-box-shadow: 0 5px 10px -2px #000000; 
     -moz-box-shadow: 0 4px 4px -2px #000000; 
     box-shadow: 0 4px 4px -2px #000000; 
     z-index: 1000; 


} 

.button { 
     background-color: #7ac4a7; 
     color: #ffffff; 
     width: 70px; 
     position: fixed; 
     margin: 0 auto; 
     margin-top: 75px; 
     left: 0; 
     right: 0; 
     border-top-left-radius: 0px !important; 
     border-top-right-radius: 0px !important; 
     border-bottom-left-radius: 5px !important; 
     border-bottom-right-radius: 5px !important; 
     font-family:'poetsenoneregular', sans-serif !important; 
     -webkit-box-shadow: 0 5px 10px -3px #2c2929; 
     -moz-box-shadow: 0 4px 6px -3px #2c2929; 
     box-shadow: 0 4px 6px -3px #2c2929; 
     z-index: 1000; 
} 

Теперь я хочу бар заголовка и кнопки для перемещения вниз открывает выпадающий список. Хорошо, что отлично работает для панели заголовка, но не для кнопки.

Я считаю, причина в том, что я использую margin: 0 auto, свойство центрировать кнопку по горизонтали. Я пробовал вещи, которые не удалось:

Я положил кнопку в div с шириной 100% и верхним краем 75px. У кнопки тогда не было поля сверху, только маржа 0: авто; Конечно, это было плавание на верхней части страницы, как и предполагалось.

Я также попытался удалить позицию: фиксированный атрибут от кнопки и только положить в контейнер. Случилось так, что кнопка только плавала влево. Верхняя часть поля была права.

Последнее, что я пробовал, заключалось в том, чтобы поставить позицию: фиксированная кнопка с пометкой: 0 auto в контейнере с краем 75px, также с фиксированным положением. Теперь картина выглядит так же, как я показал вам.

В каждом случае: Когда я одушевляю его, кнопка просто не перемещается вниз, как панель заголовка.

анимировать панель и кнопки так:

BAR:

$(".headerBarGreen").animate({marginTop: "390px"}, 500); 

КНОПКА:

$("#button").animate({marginTop: "395px"}, 500);  

I'm рад за любую помощь.

Спасибо. Привет, Марвин.

Answer 1

Ну, к счастью, я уже нашел ответ.

Как вы можете видеть в моем коде, я пытался анимировать кнопку, используя свой идентификатор. Теперь я попробовал оживить класс, который я ему дал, и все работает как шарм.

вопрос закрыт