Преодолевая тело ДИВ за заголовок и навигация

Question

https://jsfiddle.net/nrdk61ob/2/

#body-wrapper { 
    margin: 0 auto; 
    min-height: 1000px; 
    width: 75%; 
    box-shadow: 0 0 15px 2px #000; 
    border-radius: 20px; 
    margin-top:25px; 
} 
#navigation-main { 
    width: 100%; 
    margin: 0 auto; 
    text-align: center; 
    position:absolute; 
    background-color:rgba(255,0,255,0.30); 
    box-shadow:0 1px 3px #000; 
    z-index: 1000; 
} 

---

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

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

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

в основном .. Мне просто нужно знать, если с моим текущим кодом, если есть способ для меня нажать тело div на спину.

---

EDIT: я понял это. Это был альфа-уровень в цвет фона навигации. Я идиот. Спасибо, Paulie_D за то, что вы заметили нависшую вещь.

Answer 1

Это то, что вы ищете:

$(function() { 
    var scrollTopNavMain = $("#navigation-main").offset().top; 
    $(window).scroll(function() { 
    if ($(window).scrollTop() > scrollTopNavMain) 
     $("#navigation-main").css({ 
     "position": "fixed", 
     "top": 0, 
     "left": 0, 
     "right": 0 
     }); 
    else 
     $("#navigation-main").css({ 
     "position": "absolute", 
     "top": "auto", 
     "left": "auto", 
     "right": "auto" 
     }); 
    }); 
}); 

скрипку: https://jsfiddle.net/z56m3jpq/

Для вашего # 2, оказано с помощью Shadow DOM, поэтому не представляется возможным.

Answer 2

Это не совсем понятно, что вы просите, но пару моментов, которые могут помочь:

• Тело ДИВ уже позади навигации. Вы можете видеть это, потому что ваш цвет фона имеет непрозрачность 0,3. Если вы выберете сплошной цвет, который будет покрывать его.
• Приграничный радиус может иметь 4 значения, если вы не хотите, чтобы все углы были изогнуты. border-radius: 0px 0px 20px 20px; будет означать, что только дно изогнуто.

Answer 3

обновите свой # код обертки, изменив «border-radius: 20px;». до

border-radius: 0 0 20px 20px;// only rounded bottom 

, чтобы зафиксировать навигацию, обновить свой # навигационный основной код и изменить «положение: абсолютное»; до

position:fixed; 

Answer 4

для создания фиксированного меню, использовать положение: фиксированное; jsfiddle

#header-wrapper{ 
    position: fixed; 
    width: 100%; 
    top: 0; 
    z-index: 10; 
} 
#navigation-wrapper { 
    width: 100%; 
    position: fixed; 
    top: 100px; 
    z-index: 10; 
}