Динамикалық мазмұнмен жауапты элементтер - Бір элементті айналдыру

Мен басқа сұйықтық элементтерінің ортасында сұйықтықты, жылжымалы элементті жасауға тырысамын. Бүкіл сайт толығымен жауапты болуы керек.

Менің түзетулерім негізінен:

Title




Lots of items which are changing all the time.
 
Footer

The only element I want to scroll is the

element.
  • I can't use position: fixed on the other elements to keep them in place because the page's background is an image and it needs to be visible through the elements. Therefore, scrolling the page while the

  • I can't use position: absolute on any of the elements because they all have dynamic content.

  • I can't just give

    some margin-top which equals the height of the
  • Because of the dynamic content in the

Мен енді идеядан шықпаймын ... Кез келген көмек өте жоғары бағаланды.

5
Санажайпойзерді бізге бере аласыз ба?
қосылды автор Shrey Gupta, көзі
@jackweinbender Қай элемент?
қосылды автор sanjaypoyzer, көзі
@ jackweinbender
элементінің 100% биіктікке ие болуын қаламаймын, себебі ол беттегі басқа элементтермен қақтығысады. Мен олардан қаншалықты үлкен екенін білмейтіндіктен, маржаны қолдана алмаймын.
қосылды автор sanjaypoyzer, көзі
@sanjaypoyzer сізге nicescroll.js сізге көмектесе алады, ол сізге жылжытқыңыз келетін элементке жылжуды қосады.
қосылды автор Vucko, көзі
Сіз сондай-ақ фонды бекітіп көрдіңіз бе? немесе бұл қақтығыс ма?
қосылды автор Ayyash, көзі
Төменгі колонтитетте тіркелген биіктік бар ма?
қосылды автор Danield, көзі
Жылжыту мазмұнының биіктігін 100% және overflow-x: жылжыту мәніне орнатуға бола ма? Мүмкін, сіздің мақсатыңыз толығымен түсінілмейтін шығар.
қосылды автор jackweinbender, көзі
элементі. Мүмкін, сіз жасаған нәрсеңізді түсінбеймін.
қосылды автор jackweinbender, көзі
Сіз мені алдымыз. Кешіріңіз.
қосылды автор jackweinbender, көзі

6 жауаптар

№1 тәсіл: Flexbox

Flexbox Layout (икемді қорап) модулі (қазіргі таңда W3C кандидаты   Кеңес беру) тиімдірек тәсілді қамтамасыз етуге бағытталған,   контейнердегі элементтердің арасында, тіпті олардың кездегі орындарын теңестіру және тарату   өлшемі белгісіз және/немесе динамикалық (осылайша «flex» сөзі). - css-трюктардан

So using the flex box I came up with this FIDDLE

Белгілеу:

<div class="container">
<div class="header">
    

Title

    
</div>
<div class="content">content</div>
footer
</div>

Тиісті CSS:

.content
{
    flex: 1;
    overflow: auto;
}

<div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false"> <div class="snippet-code snippet-currently-hidden">

* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header,
.content,
footer {
  width: 100%;
}
.header {
  background: yellow;
}
.content {
  background: pink;
  flex: 1;
  overflow: auto;
}
footer {
  background: gray;
  height: 80px;
}
<div class="container">
  <div class="header">
    

Title

    
  </div>
  <div class="content">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
    ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
    augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.
    Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit
    litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
    ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
    consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue
    nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est
    etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi,
    qui nunc nobis videntur parum clari, fiant sollemnes in futurum.

  </div>
  
footer
</div>
</div> </div>

Бірнеше мәселе:

1) Айналдырылатын мазмұнға тек 1 flex (flex) қолданамын: 1 (яғни 1 1 auto); басқа заттар қозғалмайтын немесе динамикалық биіктікке ие болуы мүмкін.

2) Қазіргі браузерлерде flexbox қолдауы таңғажайып жақсы (қараңыз мұнда ), бірақ сіз кейбір ескі браузерлер үшін осы жұмысқа қол жеткізу үшін кейбір браузерге арнайы CSS қосу қажет.

3) Firefox ескі нұсқалары үшін жұмыс істеу үшін қосымша CSS қажет болды. Содан бері оларды жауаптан шығарып тастадым, бірақ сіз бұл жауаптың тарихында бәрін көре аласыз.

№ 2 ұтымды CSS-кестелері (кросс-шолғыш емес)

Динамикалық тақырып болуы керек болғандықтан, алдымен жұмысын орындау үшін CSS tables деп ойладым.

FIDDLE1 FIDDLE2

Сондықтан бірінші жолда h1 және nav болады,

ал екінші қатар терезенің қалған бөлігін алады.

Төменгі колонтита тіркелген биіктікке ие және позициясы бекітілген.

... Міне, осы кросс-браузерді жасау тәсілі бар деп ойламаймын. Осылайша, менің ойымша, бұл тәсіл тек Chrome мен жаңа операда жұмыс істейді. Мәселе кесте жолында айналдыру жолақтарын алу болып табылады. (Қараңыз бұл хабарлама )

5
қосылды
«Фреш» өте жақын арада стандартты бола алады және префикстермен бірге кері қарай үйлесімділік бар, мен онымен бірге боламын. Мен шынымен де Javascript-ге орналасу үшін жүгінуді қаламаймын. Үлкен жауап үшін өте рахмет.
қосылды автор sanjaypoyzer, көзі
@sanjaypoizer Мен жауапымды редакцияладым
қосылды автор Danield, көзі
Жауап үшін +1, бірақ қолдануға болатын браузерді пайдалануды шектемей, JavaScript-ні қолдануға болады.
қосылды автор Wex, көзі

Сіз осындай нәрсені іздейсіз бе? (маған түсініксіз)

http://codepen.io/gcyrillus/pen/gHDud http://codepen.io/gcyrillus/full/gHDud
it uses JavaScript to reset bg position in header/footer when page is scrolling.

function scrollit() {
if(!window.pageYOffset) {
     var pageScroll = document.body.screeny;  
     }

else {
    var pageScroll = window.pageYOffset;
      }
var mybg= document.body;
  mybg.style.backgroundPosition=" center -"+pageScroll+"px ";


}
window.onload     = scrollit ;
window.onresize   = scrollit;
window.onscroll   = scrollit;

және оны қолдануға арналған CSS

   body:before, body:after {
      content:'';
      background: inherit  ;
      position:fixed;
      z-index:2;
      width:100%;
      left:0;
    }
    body:before {
      height:120px; 
      top:0;
    }
    body:after {
      bottom:0;
      height:60px;
    }
    body {
      margin:0;
      background:url('http://lorempixel.com/1920/1500/nature/10')  center 0 fixed;
      background-size: 150% 300%;
    }

Кейбір скрипка немесе тіпті көрінетін нәрсені скриншот сізге көмектесуге көмектеседі

3
қосылды

Навигатор мен төменгі деректеме үшін тұрақты орналасуды пайдаланыңыз және JS көмегімен орталық бөліктің биіктігін орнатыңыз.

CSS

nav { position: fixed; top: 0; left: 0; }
footer { position: fixed; bottom: 0; left: 0; }
section { overflow: auto; }

JS (jQuery қабылдайды)

$(document).ready(function() {
  function setHeight() {
    var nav_h = $('nav').outerHeight();
    var footer_h = $('footer').outerHeight();
    var window_h = $(window).height();
    $('section').CSS({ 
      'height': window_h - nav_h - footer_h + 'px',
      'margin-top': nav_h + 'px',
      'margin-bottom': footer_h + 'px'
    });
  }

  $(window).on('resize', function() { setHeight(); });
  setHeight();
});
3
қосылды
Бұл өте жақсы шешімге ұқсайды, бірақ шынымен мен Javascript-ге орналасу үшін сүйенуді қаламаймын. Бірақ, мейірімділік орнатудан басқа ештеңе болмаса, қабылдайды.
қосылды автор sanjaypoyzer, көзі
@Ponysmith jScript және HTML/CSS құрылымымен бірге мұнда
қосылды автор rkpasia, көзі

Егер сіздің позицияңызды пайдаланудағы жалғыз мәселе: тіркелген опция - бұл жылжу өңдік кескін болса, фондық суретті теріс z-индексі бар мүлдем орналастырылған нысанға қойыңыз?

(Мен мұны жауап ретінде емес, бастапқы мәселе бойынша түсініктеме берер едім, бірақ мен түсінбеймін.

1
қосылды

This is kind of a crazy answer, but you could try placing a dummy element above

and use CSS to style it as visibility: hidden. Visibility: hidden will cause the dummy element to still take up space, but you wont see anything in it.

Now if the content of your

1
қосылды
Мен сондай-ақ, 100% биіктігі мен позициясын бекітіп, толығымен ораушы див құрастырғаныңызды қалай білуге ​​болады деп ойлаймын, содан кейін толығымен пайдаланылады: орталық div үшін жылжу ... бірақ мен айтқанымдай, ИКК жұмыс істейтін болса. Ал егер бұл болса, ол қосымша жылжыту жолағын қосуы мүмкін.
қосылды автор Shikayaru, көзі

Йода былай дейді: JavaScript-ні ғана шеше алатын мәселе бар.

http://jsfiddle.net/6MCLN/7/

css:

body {
    background-color: #ff0000;
    background: -ms-linear-gradient(top left, #d00 0%, #f33 50%, #611 100%);
    background: linear-gradient(top left, #d00 0%, #f33 50%, #611 100%);
    margin: 0;
    overflow: hidden;
}

h1, nav, footer {
    background-color: rgba(40, 40, 40, 0.4);
    margin: 0;
    padding: 10px;
}

section {
    overflow-y: scroll;
    padding: 10px;
}

Жоғарыда аталған JavaScript:

$(function() {

    var thereIsNoTry = function() {

        $('section').css({ height:
            $(window).height() - 
            $('h1').height() -        
            $('nav').height() -      
            $('footer').height() -                             
            parseInt($('h1').css('padding-top')) -          
            parseInt($('h1').css('padding-bottom')) -    
            parseInt($('nav').css('padding-top')) -          
            parseInt($('nav').css('padding-bottom')) -  
            parseInt($('footer').css('padding-top')) -          
            parseInt($('footer').css('padding-bottom'))  -
            parseInt($('section').css('padding-top')) -          
            parseInt($('section').css('padding-bottom'))
        });

    };

    $(window).resize(thereIsNoTry);

    thereIsNoTry();

});

ӨҢДЕУ

Мұндай нәрсеге арналған javascript-ды пайдаланудың үлкен ескертуі - егер терезедегі DOM терезе өлшемін өзгертусіз өзгертілсе, сіздің «бөлім» қолмен өзгертілуі керек. Алайда, келесі қосымша JavaScript көп сценарийлерде оны жаңартады:

$(function() {

    var thereIsNoTry = function() {

        $('section').css({ height:
            $(window).height() - 
            $('h1').height() -        
            $('nav').height() -      
            $('footer').height() -                             
            parseInt($('h1').css('padding-top')) -          
            parseInt($('h1').css('padding-bottom')) -    
            parseInt($('nav').css('padding-top')) -          
            parseInt($('nav').css('padding-bottom')) -  
            parseInt($('footer').css('padding-top')) -          
            parseInt($('footer').css('padding-bottom'))  -
            parseInt($('section').css('padding-top')) -          
            parseInt($('section').css('padding-bottom'))
        });

    };

    $(window).resize(thereIsNoTry);

    thereIsNoTry();

    //In case you're updating the DOM
    $(document).ajaxSuccess(thereIsNoTry);

    var oldAnimate = jQuery.fn.animate;

    //In case the header can be animated
    jQuery.fn.animate = function (properties, duration, 
                                  animation, easing) {

        if (arguments.length == 4) {
            return oldAnimate.call(this, properties, 
                                   duration, animation, easing);
        }

        if (arguments.length == 3) {
            return oldAnimate.call(this, properties,
                                   duration, animation);
        }

        if (arguments.length == 2 && typeof duration === 'object') {

            var options = {
                progress: function (animation, progress, remainingMs) {

                    if (duration.progress) {
                        duration.progress.call(this, animation, 
                                               progress, remainingMs);
                    }

                    thereIsNoTry();

                }
            }

            var option = $.extend({}, duration, options);

            return oldAnimate.call(this, properties, option);

        }

        if (arguments.length == 2) {
            return oldAnimate.call(this, properties, {
                duration: duration,
                progress: thereIsNoTry
            });
        }

        return oldAnimate.call(this, properties);

    };

    $('nav').animate({ height: '100px' }, { duration: 'slow' });

}); 

ӨҢДЕУ

Қосылған толып кету: тік жылжу жолағының алдын алу үшін BODY ішіне жасырынған

0
қосылды