Скрыть прокрутку содержимого под прозрачным заголовком

Question

Хорошо, я сошел с ума в поисках ответа. Это просто, я это знаю.

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

Пример ниже: thnki.com/hosting/sycamore

Answer 1

Вам либо нужно:

• сделать непрозрачное изображение, которое выглядит так же, как сейчас,
• создайте div для нижней части страницы (непосредственно под / после заголовка), который имеет свою собственную настройку стиля переполнения, которая заставит полосу прокрутки быть только частью страницы
• или просто наслаждайтесь этим потрясающим эффектом наложения прозрачности, который вы получаете.

мне нравится как оно есть на самом деле

Answer 2

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

http://www.pmob.co.uk/temp/fixed-header-footer-left-new.htm

Моя связанная с CSS конфигурация была такова: * Вы можете заметить, что я объявил top / bottom / left / right / height, а также положение относительно, я установил фон, переполнение на auto и тоже установил z-index.

Я думаю, что все эти комбинации позволили скрыть текстовое содержимое при прокрутке под верхней панелью / под верхним меню.

.topnavigation {  
    background-position:fixed;
    background-color:   lightgray;
    width:              100%;
    overflow:           auto;
    z-index:            10;

}
    .main_body {
        background:     white;
        position:       relative;
        left:           200px;
        top:            30px;
        bottom:         0;
        right:          0;
        white-space:    wrap; 
        width:          660px; 
        overflow:       auto;
        border:         0px;
        z-index:        1;


    }