position: fixed in reveal.js

Question

Tôi đang cố gắng tạo tiêu đề cho bản trình bày reveal.js của mình gắn vào đầu màn hình. Nội dung trong tiêu đề là động trên cơ sở mỗi trang chiếu, vì vậy tôi phải đặt đánh dấu trong thẻ phần.

Vị trí hiển nhiên: cố định không thực sự cung cấp kết quả thỏa mãn trong tệp reveal.js nếu đánh dấu nằm trong thẻ phần. Tôi thực sự không thể làm ra lý do tại sao đó là chính xác, nhưng tôi thấy một số thông tin trong github repo gợi ý thiết lập kích thước trình bày để phù hợp với kích thước khung nhìn với:

Reveal.initialize { 
    ... 
    width: '100%', 
    height: '100%', 
    ... 
} 

Nhưng nó vẫn không làm việc cho tôi - có vẻ như bài thuyết trình không thực sự bị ảnh hưởng bởi những điều trên. Đây là một bản demo:

https://dl.dropboxusercontent.com/u/706446/_linked%20stuff/reveal.js/index.html

Bất kỳ ý tưởng làm thế nào để giải quyết này?

Answer 1

Vào cuối main.html add bạn:

Reveal.initialize({ center: false, })

Answer 2

Thêm phần này vào css:

.reveal.slide .slides > section, .reveal.slide .slides > section > section { 
    min-height: 100% !important; 
    display: flex !important; 
    flex-direction: column !important; 
    justify-content: center !important; 
    position: absolute !important; 
    top: 0 !important; 
    align-items: center !important; 
} 
section > h1, section > h2 { 
    position: absolute !important; 
    top: 0 !important; 
    margin-left: auto !important; 
    margin-right: auto !important; 
    left: 0 !important; 
    right: 0 !important; 
    text-align: center !important; 
} 
.print-pdf .reveal.slide .slides > section, .print-pdf .reveal.slide .slides > section > section { 
    min-height: 770px !important; 
    position: relative !important; 
} 

• Demo https://rawgit.com/rofrol/reveal.js/fixed_header/
• Mã https://github.com/rofrol/reveal.js/blob/fixed_header/index.html#L411
• Thảo luận https://github.com/hakimel/reveal.js/issues/1312https://github.com/hakimel/reveal.js/issues/180