Fixed DIV позиционирования Выпуск

Я работаю на моем шаблоне отчетности и не в состоянии выяснить положение деталей содержит (правая сторона): http://relevantcodes.com/Tools/ExtentReports2/ExtentJava210.html Fixed DIV позиционирования Выпуск

У меня возникли проблемы с прокруткой, которые я не в состоянии выяснить. Пожалуйста, см 2 изображения ниже:

Перед свитка:

После свитка:

Во 2-изображения, обратите внимание на дополнительное пространство в верхней части, когда прокрутки происходит в левом размере (где хранятся все тесты). Это происходит, когда DIV исправлен, но я хотел знать, есть ли способ разместить его сверху, когда мы прокручиваем вниз?

Другая проблема заключается в том, что когда мы открываем меню (щелкнув по полоскам в углу вверху слева), левый контейнер перекрывает правый контейнер. Как я могу исправить эту проблему? Устанавливает новую ширину для правильного контейнера, используя js хороший подход?

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

источник

2015-09-26 Anshoo

Вы хотите, чтобы правый div фиксировался? я имею в виду, что он должен отображаться всегда? –

, и вы сказали, в чем проблема, но я думаю, вы забыли упомянуть то, что вы ожидаете –

Santhosh: да, я бы хотел, чтобы правый контейнер контейнера оставался фиксированным. Левая сторона содержит тесты, которые пользователи должны иметь возможность прокручивать, потому что их может быть 100. На правой стороне есть детали, и только одна информация о тесте будет рассмотрена сразу, поэтому она должна оставаться фиксированной, поскольку пользователь прокручивает левую часть. Надеюсь, что это прояснится. – Anshoo

Выпуск 1

1.Remove .pinned { position: fixed !important;} в строке 6 в файле (materialize.min.css).
2.Use ниже JS

$('.vh100').css('position', 'absolute')// to add aboslute position by default. 
$(window).scroll(function() { 
    if ($(window).scrollTop() > 48) // nav bar height is 48 px 
    { 
    $('.vh100').css('position', 'fixed'); // add position fixed if scrolling is done and scroll top is greater than 48 px which is the nav bar 
    $('.vh100').css('margin-top', '-48px'); // when scroll up you have assign negative margin-top so that the space will not be appeared. 
    } else { 
    $('.vh100').removeAttr('style'); // remove margin-top 
    $('.vh100').css('position', 'absolute'); // and add position absolute 
    } 
});

Выпуск 2 (ExternalJava210.html -> Line: 3273)

добавлять и удалять позиции из .vh100 при .menu-toggle нажатии.

источник

2015-09-26 05:29:41

J Santosh - спасибо за это, я смог использовать ваш код (с несколькими модификациями) и решить обе проблемы. Также исправлена проблема с расширением меню, динамически устанавливая ширину контейнера. Ура! – Anshoo

рад помочь :) –

Santosh - только что проверил, что с помощью этой техники изображение лайтбокса работает неправильно. В тесте «Uses Media», если щелкнуть любое изображение, изображение не будет отображаться полностью. Постараюсь понять это. Приветствия. – Anshoo

Для вашей первой проблемы, я считаю, что единственный способ» d быть в состоянии выполнить это прослушивание javascript - слушать, когда пользователь прокручивает и меняет позицию с position:absolute/relative на position:fixed после прокрутки вниз Ypx. Отказ от ответственности: там может быть css-способ сделать это, о котором я не знаю.

Для вашей второй проблемы с перекрытием, я установил бы DIV, который выдвигается к position:absolute так, что вместо того, чтобы переместить всю страницу (и принимая ресурсы перерисовки всех элементов) он просто скользит по остальной части вашего контента. Возможно, заложите фон за ним, который угаснет содержание позади него.

Надеюсь, это поможет.

источник

2015-09-26 03:22:33

Влад - спасибо! Теперь работает. – Anshoo

Ваша вторая проблема уходит, если вы удаляете позицию fixed на этом втором столбце, все без исключения перестраивается. Я бы сказал, что лучший подход заключается в том, чтобы удалить это правило .pinned из вашего CSS и обработать позицию столбца с помощью JS.

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

источник

2015-09-26 03:47:07 1cgonza

Fixed DIV позиционирования Выпуск

ответ

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