2023-07-27 移行に伴う改造。html
<div class="banner">
<form method="get" action="/" class="search-form">
<input type="search" class="search-field" style="background-color: #fffacd; display: none; width: 100%;" name="s" data-swplive="true" oninput="this.value=this.value.replace(/ /g, ' ');" />
<input class="btn_search" type="button" value="検索" style="display: none;" />
<button class="btn_hide" type="button" style="display: none;">非表示</button>
</form>
<button class="btn_article_search" type="button"><span>検</span><br><span>索</span></button>
</div>
<style type="text/css">
.banner {
z-index: 9999;
width: 100%;
height:100px;
position: fixed;
top: 100px;
transition: 1s;
display: flex;
justify-content: center;
align-items: center;
}
.search-form {
display: inline-block;
width: 100%; /* formの幅を80%にする */
}
.search-field {
width: 100%; /* input fieldをformの全幅にする */
}
.btn_article_search {
position: fixed;
left: 0;
top: 150px; /* ヘッダーの高さに合わせて調整してください */
z-index: 9999; /* 他の要素に覆い隠されないようにする */
background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒色背景 */
color: #fff; /* テキストの色を白に変更 */
width: 50px; /* ボタンの幅を設定 */
height: 100px; /* ボタンの高さを設定 */
font-size: 7px; /* テキストのサイズを変更 */
}
.btn_article_search span {
display: block;
}
</style>
<script>
jQuery(window).on('load', function() {
var pos = 0;
var header = jQuery('.banner');
var btn_article_search = jQuery('.btn_article_search');
var search_field = jQuery('.search-field');
var btn_search = jQuery('.btn_search');
var btn_hide = jQuery('.btn_hide');
jQuery(window).on('scroll', function() {
if (jQuery(this).scrollTop() > pos) {
// when scroll down
btn_article_search.show();
search_field.hide();
btn_search.hide();
btn_hide.hide();
}
pos = jQuery(this).scrollTop();
});
btn_article_search.on('click', function() {
btn_article_search.hide();
search_field.show();
btn_search.show();
btn_hide.show();
});
btn_hide.on('click', function() {
btn_article_search.show();
search_field.hide();
btn_search.hide();
btn_hide.hide();
});
});
</script>
—-以前の設定—–
ヘッダーシタウィジェットで設定。
自動で検索窓を隠さないと結構邪魔なので。
テーマ
Twenty Seventeen
検索窓の位置
ヘッダーシタウィジェット
ーーーーーーーーーーーー
<?php
$str = <<<EOS
<div class=”banner”>
<form method=”get” action=”/”>
<input type=”search” style=”background-color: #fffacd;” name=”s” data-swplive=”true” oninput=”this.value=this.value.replace(/ /g, ‘ ‘);” />
<input type=”submit” value=”↑ブログ内検索。文字入力↑” />
</form>
</div>
EOS;
echo $str
?>
<style type=”text/css”>
.banner{
z-index: 1;
width: 100%;
height:100px;
position: fixed;
//left:0;
//top:0;
transition: 1s;
}
.banner.hide {
transform:translateY(-800px);
}
</style>
<script>
jQuery(function(){
var pos = 0;
var header = jQuery(‘.banner’);
// alert(“test”);
jQuery(window).on(‘scroll’, function(){
if(jQuery(this).scrollTop() < pos ){
//上にスクロールしたとき
header.removeClass(‘hide’);
}else{
//下にスクロールしたとき
header.addClass(‘hide’);
}
pos = jQuery(this).scrollTop();
});
});
</script>
ーーーーーーーーーーーー
2022-04-18 追記。動作がうざったいので変更。
ボタンを押して検索フォームが出るように変更しました。
とりあえず今の設定。
<?php
$str = <<<EOS
<span class=”banner”>
<form method=”get” action=”/”>
<input type=”search” style=”background-color: #fffacd;” name=”s” data-swplive=”true” oninput=”this.value=this.value.replace(/ /g, ‘ ‘);” />
</form>
</span>
<input class=”btn_search” type=”button” value=”検索” />
EOS;
echo $str
?>
<style type=”text/css”>
.banner{
z-index: 1;
width: 100%;
height:100px;
// position: fixed;
//left:0;
//top:0;
// transition: 1s;
}
.banner.hide {
display:none;
}
</style>
<script>
jQuery(function(){
var pos = 0;
var header = jQuery(‘.banner’);
jQuery(window).on(‘scroll’, function(){
if(jQuery(this).scrollTop() < pos ){
//上にスクロールしたとき
header.addClass(‘hide’);
}else{
//下にスクロールしたとき
header.addClass(‘hide’);
}
});
var btn_search = jQuery(‘.btn_search’);
btn_search.on(‘click’, function() {
header.removeClass(‘hide’);
});
});
</script>
スマホでの動作がうまく行かないので追記
<?php
$str = <<<EOS
<span class=”banner”>
<form method=”get” action=”/”>
<input type=”search” style=”background-color: #fffacd;” name=”s” data-swplive=”true” oninput=”this.value=this.value.replace(/ /g, ‘ ‘);” />
</form>
</span>
<input class=”btn_search” type=”button” value=”検索” />
EOS;
echo $str
?>
<style type=”text/css”>
.banner{
z-index: 1;
width: 100%;
height:100px;
// position: fixed;
//left:0;
//top:0;
// transition: 1s;
}
.banner.hide {
display:none;
}
</style>
<script>
jQuery(function(){
var pos = 0;
var header = jQuery(‘.banner’);
jQuery(window).on(‘scroll’, function(){
if(jQuery(this).scrollTop() < pos ){
//上にスクロールしたとき
// header.removeClass(‘hide’);
// header.addClass(‘hide’);
}else{
//下にスクロールしたとき
header.addClass(‘hide’);
}
pos = jQuery(this).scrollTop();
});
var btn_search = jQuery(‘.btn_search’);
btn_search.on(‘click’, function() {
header.removeClass(‘hide’);
});
});
</script>
