このブログの設定、検索 SearchWP 自動で隠す スクロール 変更

ヘッダーシタウィジェットで設定。

自動で検索窓を隠さないと結構邪魔なので。

テーマ
Twenty Seventeen

検索窓の位置
ヘッダーシタウィジェット

参考
Jqueryの参考

ーーーーーーーーーーーー

<?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>

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です