2017-08-30 56 views
0

我創建了一個小型搜索欄。搜索欄工作得很好,但當跳到結果時,滾動是錯誤的。第一個結果在頂部,但搜索欄仍然向下滾動。沒有必要滾動。構建Chrome搜索欄副本

鉻搜索欄只在需要時滾動。結果始終在我認爲的屏幕中心。

所以這是我目前的搜索欄

$(document).ready(function() { 
 
    defaultText = $("#loremIpsum").html(); // store an empty text as default 
 

 
    $('#searchBar').on('input',function() { // search when receiving new input 
 
     search(); 
 
    }); 
 
}); 
 

 
var defaultText = null; 
 
var results = null; // the found results 
 
var currentResultIndex; // the current focused result 
 

 
function search() { // start searching 
 
    var keyword = $("#searchBar").val(), // the text the user is looking for 
 
     textSource = defaultText; // reset the result 
 

 
    currentResultIndex = 0; // start with the first result 
 

 
    keyword = keyword.replace(/(\s+)/, "(<[^>]+>)*$1(<[^>]+>)*"); 
 

 
    var pattern = new RegExp("(" + keyword + ")", "gi"); 
 

 
    textSource = textSource.replace(pattern, "<mark>$1</mark>"); 
 
    textSource = textSource.replace(/(<mark>[^<>]*)((<[^>]+>)+)([^<>]*<\/mark>)/, "$1</mark>$2<mark>$4"); 
 

 
    $("#loremIpsum").html(textSource); // paste the new text with the marked results 
 

 
    results = $("mark"); // store all results 
 

 
    if (results.length > 0) { 
 
     currentResultIndex = 1; 
 
     setResultText(); // write down "result number 1 of 150 .." 
 
     focusResult(); // scroll to the current result 
 
    } 
 
} 
 

 
function goToNextResult() { // scroll to the next result 
 
    if (results.length > 0) { 
 
     currentResultIndex++; 
 

 
     if (currentResultIndex > results.length) { // when reaching the max index, go back to the first 
 
      currentResultIndex = 1; 
 
     } 
 

 
     setResultText(); 
 
     focusResult(); 
 
    } 
 
} 
 

 
function goToPreviousResult() { // scroll to the previous result 
 
    if (results.length > 0) { 
 
     currentResultIndex--; 
 

 
     if (currentResultIndex == 0) { // when reaching the min index, go back to the last 
 
      currentResultIndex = results.length; 
 
     } 
 

 
     setResultText(); 
 
     focusResult(); 
 
    } 
 
} 
 

 
function setResultText() { 
 
    $("#resultCounter").html(currentResultIndex + " of " + results.length); // a counter of results 
 
} 
 

 
function clearSearch() { // clear the search bars text 
 
    $("#searchBar").val(""); 
 
    search(); 
 
    $("#resultCounter").html("&nbsp;"); 
 
} 
 

 
function focusResult() { // scroll to the current result and mark it 
 
    var targetElement = results[currentResultIndex - 1]; 
 
    $("mark").removeClass("hasFocus"); 
 
    $(targetElement).addClass("hasFocus"); 
 
    $('body').animate({ 
 
     scrollTop: $(targetElement).offset().top 
 
    }, 500); 
 
}
#loremIpsum{ 
 
    text-align: justify; 
 
    margin-top: 20px; 
 
    margin-bottom: 20px; 
 
} 
 

 
.resultBtn{ 
 
    width: 32px; 
 
    height: 32px; 
 
    margin-left: -90px; 
 
} 
 

 
#resultCounter{ 
 
    text-align: center; 
 
} 
 

 
.hasFocus { 
 
    background-color: red; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="mainContent"> 
 
      <input id="searchBar" class="input" type="text" placeholder="Search..."> 
 
      <button onclick="goToNextResult()">Next</button> 
 
      <button onclick="goToPreviousResult()">Previous</button> 
 
      <button onclick="clearSearch()">Clear</button> 
 
      <p id="resultCounter">&nbsp;</p> 
 

 
      <p id="loremIpsum">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
 
       nonumy eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
 
       dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
 
       amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
 
       duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus 
 
       est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
 
       eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
 
       dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
 
       amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
 
       duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus 
 
       est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
 
       nonumy eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
 
       dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
 
       amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
 
       duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus 
 
       est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
 
       eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
 
       dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
 
       amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
 
       duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus 
 
       est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
 
       nonumy eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
 
       dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
 
       amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
 
       duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus 
 
       est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
 
       eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
 
       dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
 
       amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
 
       duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus 
 
       est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
 
       nonumy eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
 
       dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
 
       amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
 
       duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus 
 
       est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
 
       eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
 
       dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
 
       amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
 
       duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus 
 
       est Lorem ipsum dolor sit amet. 
 
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
 
       nonumy eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
 
       dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
 
       amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
 
       duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus 
 
       est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
 
       eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
 
       dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
 
       amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
 
       duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus 
 
       est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
 
       nonumy eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
 
       dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
 
       amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
 
       duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus 
 
       est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
 
       eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
 
       dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
 
       amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
 
       duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus 
 
       est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
 
       nonumy eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
 
       dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
 
       amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
 
       duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus 
 
       est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
 
       eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
 
       dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
 
       amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
 
       duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus 
 
       est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
 
       nonumy eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
 
       dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
 
       amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
 
       duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus 
 
       est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
 
       eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
 
       dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
 
       amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
 
       duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus 
 
       est Lorem ipsum dolor sit amet.</p> 
 
     </div>

當跳到結果,搜索Maincontent滾動向下/向上。

問題是,頁面即使在頂部的第一個結果上滾動,例如。結果不集中,計算錯誤的高度。

目標計算不正確。

Scroll

那麼,怎樣才能讓我的棒滾動只是需求。

回答

1

你已經差不多已經有了。我只是修改focusResult()函數以從scrollTop()值中減去window height/2。現在,每個得到聚焦的結果都會在中間的窗口中自行對齊。這是你想要的嗎?

在這裏,您去工作小提琴:

$(document).ready(function() { 
 
    defaultText = $("#loremIpsum").html(); // store an empty text as default 
 

 
    $('#searchBar').on('input',function() { // search when receiving new input 
 
     search(); 
 
    }); 
 
}); 
 

 
var defaultText = null; 
 
var results = null; // the found results 
 
var currentResultIndex; // the current focused result 
 

 
function search() { // start searching 
 
    var keyword = $("#searchBar").val(), // the text the user is looking for 
 
     textSource = defaultText; // reset the result 
 

 
    currentResultIndex = 0; // start with the first result 
 

 
    keyword = keyword.replace(/(\s+)/, "(<[^>]+>)*$1(<[^>]+>)*"); 
 

 
    var pattern = new RegExp("(" + keyword + ")", "gi"); 
 

 
    textSource = textSource.replace(pattern, "<mark>$1</mark>"); 
 
    textSource = textSource.replace(/(<mark>[^<>]*)((<[^>]+>)+)([^<>]*<\/mark>)/, "$1</mark>$2<mark>$4"); 
 

 
    $("#loremIpsum").html(textSource); // paste the new text with the marked results 
 

 
    results = $("mark"); // store all results 
 

 
    if (results.length > 0) { 
 
     currentResultIndex = 1; 
 
     setResultText(); // write down "result number 1 of 150 .." 
 
     focusResult(); // scroll to the current result 
 
    } 
 
} 
 

 
function goToNextResult() { // scroll to the next result 
 
    if (results.length > 0) { 
 
     currentResultIndex++; 
 

 
     if (currentResultIndex > results.length) { // when reaching the max index, go back to the first 
 
      currentResultIndex = 1; 
 
     } 
 

 
     setResultText(); 
 
     focusResult(); 
 
    } 
 
} 
 

 
function goToPreviousResult() { // scroll to the previous result 
 
    if (results.length > 0) { 
 
     currentResultIndex--; 
 

 
     if (currentResultIndex == 0) { // when reaching the min index, go back to the last 
 
      currentResultIndex = results.length; 
 
     } 
 

 
     setResultText(); 
 
     focusResult(); 
 
    } 
 
} 
 

 
function setResultText() { 
 
    $("#resultCounter").html(currentResultIndex + " of " + results.length); // a counter of results 
 
} 
 

 
function clearSearch() { // clear the search bars text 
 
    $("#searchBar").val(""); 
 
    search(); 
 
    $("#resultCounter").html("&nbsp;"); 
 
} 
 

 
function focusResult() { // scroll to the current result and mark it 
 
    var targetElement = results[currentResultIndex - 1]; 
 
    var offsetHeight = $(window).height()/2; 
 
    $("mark").removeClass("hasFocus"); 
 
    $(targetElement).addClass("hasFocus"); 
 
    $("html, body").animate({ 
 
     scrollTop: ($(targetElement).offset().top - offsetHeight) 
 
    }, 300); 
 
}
#loremIpsum{ 
 
    text-align: justify; 
 
    margin-top: 20px; 
 
    margin-bottom: 20px; 
 
} 
 

 
.resultBtn{ 
 
    width: 32px; 
 
    height: 32px; 
 
    margin-left: -90px; 
 
} 
 

 
#resultCounter{ 
 
    text-align: center; 
 
} 
 

 
.hasFocus { 
 
    background-color: red; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="mainContent"> 
 
      <input id="searchBar" class="input" type="text" placeholder="Search..."> 
 
      <button onclick="goToNextResult()">Next</button> 
 
      <button onclick="goToPreviousResult()">Previous</button> 
 
      <button onclick="clearSearch()">Clear</button> 
 
      <p id="resultCounter">&nbsp;</p> 
 

 
      <p id="loremIpsum">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
 
       nonumy eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
 
       dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
 
       amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
 
       duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus 
 
       est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
 
       eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
 
       dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
 
       amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
 
       duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus 
 
       est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
 
       nonumy eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
 
       dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
 
       amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
 
       duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus 
 
       est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
 
       eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
 
       dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
 
       amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
 
       duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus 
 
       est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
 
       nonumy eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
 
       dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
 
       amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
 
       duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus 
 
       est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
 
       eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
 
       dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
 
       amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
 
       duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus 
 
       est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
 
       nonumy eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
 
       dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
 
       amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
 
       duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus 
 
       est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
 
       eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
 
       dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
 
       amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
 
       duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus 
 
       est Lorem ipsum dolor sit amet. 
 
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
 
       nonumy eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
 
       dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
 
       amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
 
       duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus 
 
       est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
 
       eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
 
       dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
 
       amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
 
       duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus 
 
       est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
 
       nonumy eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
 
       dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
 
       amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
 
       duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus 
 
       est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
 
       eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
 
       dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
 
       amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
 
       duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus 
 
       est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
 
       nonumy eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
 
       dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
 
       amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
 
       duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus 
 
       est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
 
       eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
 
       dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
 
       amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
 
       duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus 
 
       est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
 
       nonumy eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
 
       dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
 
       amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
 
       duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus 
 
       est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
 
       eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
 
       dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
 
       amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
 
       ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
 
       duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus 
 
       est Lorem ipsum dolor sit amet.</p> 
 
     </div>

+0

是的,這是真棒。滾動時,有沒有辦法讓搜索欄保持在屏幕上? – peterHasemann

+1

是的,但你必須在不同的元素中分離,並使用'position:fixed;'例如。然後我會看看CSS屬性overflow – hallleron